Whats the best method?

woaw, thanks

        No problem, you’re very welcome. :winky:

I like the SVG method you zipped, it seems like the best since its available.
The other way (creating a <li> of links nested in a <nav>) seems only good if not for
SVG, so ill use that as my solution.
The only thing is I guess

<a xlink:href="bedroom.html">

Is how you declare links in a <svg>
and how did you get the coordinates when you created the polygon points?

Hi there lurtnowski,

  1. yes that is how the links are coded but the svg tag also requires
    xmlns:xlink="http://www.w3.org/1999/xlink" ,
  2. I used “photoshop” , enlarged the image to 400%. then positioned
    the pointer tool to the various corners of each room. At that zoom
    value the top and left rulers displayed each pixel dimension of the
    image.The x, y coordinates were then read for each point . Similar
    methods can probably be used with other image editors.



ok, just looking at the CSS file and have a question about

@media ( max-width: 52em ) {
#floor-plan {
    width: 40em;
    height: 40em;

@media ( max-width: 42em ) {
#floor-plan {
    width: 30em;
    height: 30em;

@media ( max-width: 32em ) {
#floor-plan {
    width: 25em;
    height: 25em;

@media ( max-width: 26em ) {
#floor-plan {
    width: 17em;
    height: 17em;

You seem to be changing the width/height of the picture depending on the size of device used. How did you come up with those numbers? (as well as the original, 50 X 50 em)

If you look, the size of the image is just set to be smaller than the screen is on each step, nothing difficult.
Though as mentioned before, you could remove the queries if it’s made fluid.

1 Like

Hi there lurtnowski,

further to what @SamA74 has pointed out, it needs to be stated that
all of the media queries used are just for the benefit of that old browser
IE11. If your concern is to only cater for modern browsers then there is
no need for them at all. The CSS would then be…

#floor-plan {
    max-width: 50em;
    margin: auto;
    border: 1px solid #666;
    background-image: url( ../images/floor-plan-bg.jpg );
    background-size: 100% auto;

#floor-plan svg {
    display: block;

If you still want to cater for IE11, then check out the attachment which
contains a few modifications and just the one media query. :winky:

lurtnowski-v2.zip (133.6 KB)


awesome, thanks.

That 2nd way seems great with the hover effect to emphasize the fact its a link. What is this

   a path {
            transition: 0.5s ease-in-out;
   a:hover path {
            fill: rgba( 0, 0, 0, 0.6 );

  <pattern id="image-bg" x="0" y="0" width="1500" height="1500" patternUnits="userSpaceOnUse">
   <image width="1500" height="1500" xlink:href="images/floor-plan-bg.jpg"/>

What is the <defs>, <pattern>, and <image> tag?

Also, it looks like the first <path> declares the image and provides coordinates ((top-left) x,y, (top-right) x, y, (bottom-left) x, y, (bottom-right) x, y)

<path d="M0,0 1500,0 1500,1500 0,1500 0,0" stroke="none" fill="url(#image-bg)"/>

Why does the first coordinate start with M?

I’m trying to do this on a map of the world so that only certain countries become links (thats this weekends project for me.

I’m trying to emulate https://www.cnic.navy.mil/map.html

Coolheads list key suggestion is very logical and also will make the webpage screen reader friendly for the vision impaired users. Sometimes simple is best


Hi there lurtnowski,

lots of questions. :eyebrows:

lots of reading. :rofl:



ok, am trying this bad boy out, and am adding bootstrap in the mix, cause I want to use tooltips (and modals later)
I changed the colors a bit

 <a xlink:href="bedroom.html"  data-toggle="tooltip" data-placement="right" title="Bedroom">

Since the is wrapped in an <a> tag, shouldn’t the tooltip work on it?

thanks for your help me too i benefict from your replies

Hi there lurtnowski,

yes, you really have been a very naughty boy. :unhappy:

Tooltips do not require any “jQuery” or “Bootcrap”. :rolleyes:

“Vanilla CSS” and “SVG” can simply handle the task. :winky:

lurtnowski-v3.zip (133.7 KB)


1 Like

thanks. I’m trying to duplicate this
https://www.cnic.navy.mil/map.html on

But using the SVG method.
and the reason I thought of tooltips (or any mouseover effect) is best here is cause what if the territory covers Alaska and the west coast (like the example).
Then the reason I wanted to use bootstrap is so I can use modals eventually when I make each territory clickable.
Thanks again
man… I got a lot to learn

I’m now confused about what your goal is. You started with a blueprint layout, and now post a map of the globe.

If you are planning on doing this type of work more extensively I’m not so sure the approaches that have been so far discussed in this topic are “best”.

What might be best is to use programs that have been specifically developed for this type of work. For example, for the blueprint I think AutoCAD might be better, for the map maybe OpenStreetMap. I do not know if they have “export to web” though I imagine they do (perhaps only with premium versions). In any case, for anything more complex than a simple image map I think you should at least look into using something that exists rather than “reinventing the wheel”

I think for a world map, such maps exist on-line as SVG, so one could probably be sourced with a bit of searching. Eg:-

For the house plan, the rooms are basic shapes which could easily be traced in a vector drawing program like Illustrator or Inkscape.

1 Like

wow, didn’t think that service existed, my bad. Heres the effect I like,
What I like are the pop-ups and that each link op[ens up a modal
(I tried it the SVG way but I gave up after a bit and decided to take i t slow and stick to what I know for now).

Lemme ask them, if this effect is possible, and if they’ll show me documentation on how to do it…

all-right. I gave the 1st example a try and am stuck on one thing
Notice I have a hover effect on each of the rooms, and both the rooms and the connection think open up a modal thing, lets say T wanted to have a hover effect for the connection line to (which is three using SVG)

Is there a way to do that?

Yes, you can apply CSS to SVG elements just the same way would HTML elements, using selectors with IDs, classes or just the element name, like you have here:-

.link:hover { 
    fill: silver;

Is that Bilko?

So you could add a class to the link line and target that.

Note you can put the SVG styles in with the main styles in the head or an external sheet.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.