I have a picture of the floor-plan of a house,
Im trying to figure out the best way to make that picture interactive
(they can click on a part of the house and a link will open up to another page explaining what the purpose of that room is)
Should I make the position of the floor-plan relative, then absolutely position a link? Is there a better way to go about this?
Wow I had forgotten about the map element! I got inspired to look into it and found this site which might help you generate maps: https://www.image-map.net/ It lets you draw the areas you want to make clickable, give it a link, and a tooltip. It then generates the code you need, and is not reliant on JavaScript.
It would still be helpful to visit the docs Ray linked to so that you understand how it works behind the scenes
Another option, if you use an SVG (which lends itself to this kind of image), you can wrap SVG shapes in anchor tags to have shaped links within the image.
Make sure the Map element is scalable across screens, mobile and desktop.
ok, I’m not smart enough to use SVG to recreate a floorplan. I think I need to make an image the map element. Since i’ll be using bootstrap, I can make it scalable by adding this class
<img src="..." class="img-fluid" alt="Responsive image">
ok?
I don’t know. I don’t use Bootstrap. You can try it out, obviously.
If it doesn’t work, you can try this as a backup:
Hi there lurtnowski,
check out the attachment, which includes
a fully working SVG example. 
lurtnowski.zip (133.3 KB)
Note;-
This does not require BootStrap, it works
straight out of the box. 
coothead
In coothead’s excellent example he uses the original image as a background and the svg is only simple polygons to define the room outlines for the links. So there was no need to recreate the whole image in svg.
Though an svg would make a very crisp, scalable image.
I have not experimented with the map element yet, so I don’t know how it scales, or more importantly how the areas and their coordinates scale within it. But Bootstrap is only a grid-type framework, working in rows and columns. Elements placed by coordinates are handled differently.
The css could be simplified further to make the image “fluid” rather than adaptive, which is my preferred method of responsive design.
Simply swap width:50em for max-width:50em on the #floor-plan and remove the height rule.
This is enough to make the image fluid, so you can now remove all the media queries from the bottom of the css.
That is exactly how I coded the CSS originally…
#floor-plan {
max-width:50em;
margin: auto;
border: 1px solid #666;
background-image: url( ../images/floor-plan-bg.jpg );
background-size: 100% auto;
}
… but then I checked it’s display in IE11. 
If IE 11 is not an issue, then use the above code
and remove the redundant media queries.
coothead
I suppose the spec for them pre-dates the age of mobile browsing and RWD.
It looks like SVG is the way to go with this.
You could use the old intrinsic ratio trick/hack and that will work in IE11.
#floor-plan {
width:50%;
padding-top:50%;
position:relative;
margin: auto;
border: 1px solid #666;
background-image: url( ../images/floor-plan-bg.jpg );
background-size: 100% 100%;
background-repeat:none;
}
#floor-plan svg {
display: block;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
width: 100%;
height: 100%;
}
I think a hover effect would aid accessibility also (on desktop).
e.g.
#floor-plan a:hover polygon {fill:rgba(0,0,0,0.5)}
I was actually surprised when it just worked, taking the height out. I was expecting to have to do something like that to set the height.
But of course I did not take the time to test across browsers.
I, personally, prefer the media queries method to that.
It gets smaller slower. 
I agree with the hover addition though. 
coothead
Yes you are right and sometimes adaptive is better for image like that as they remain consistent for longer. 
I suppose you could do adaptive for the larger sizes and then resort to percent once you get near to mobile sizes.
I only write this sort of code for mental stimulation in
the hope that it might stave off senile dementia.
If it was actually down to me, I would just display an
image of the floor plan and follow it with this code…
<h2>Further information may be obtained here:-</h2>
<ul>
<li><a href="bedroom.html">bedroom</a></li>
<li><a href="ensuite.html">ensuite</a></li>
<li><a href="study.html">study</a></li>
<li><a href="livingroom.html">living room</a></li>
<li><a href="staircase.html">staircase</a></li>
<li><a href="diningarea.html">dinining area</a></li>
<li><a href="patio.html">patio</a></li>
<li><a href="kitchen.html">kitchen</a></li>
<li><a href="utility.html">utility</a></li>
<li><a href="wc.html">w.c.</a></li>
<li><a href="washroom.html">wash room</a></li>
<ul>
No messing about, job done.
coothead
@cootheads example is the method I would recommend but just for old times sake and because the areas are mostly rectangular you can absolutely place the anchors over the respective parts of the image like this:
http://www.pmob.co.uk/temp2/floor-plan.html
That is the way I would have done it before svg was available and if you needed to support very old browsers. Of course this only works if areas are mostly rectangular.
Do the spans d1, d2, and d3 account for the non-rectangular surface area? The dining area list item has all the three spans, whereas the patio and living room list items do not have spans (They are a bit non-rectangular).
I don’t see how the shapes are accounted for, but maybe that’s just me not knowing any better. Ah, I see that you used a :before target for .living and .patio. Good show.
It’s really hard to do this using image maps that don’t result in bloated code, but I’m not the maestro.
Yes they are used for additional rectangular sections that are then all joined together.
You could lose two of the spans if you used :before and :after but I was just keeping the more complicated section simpler.