While working on a responsive website, I encountered an issue with Image Maps not functioning properly with percentage-based co-ordinates. After researching online, I came across a JavaScript workaround at this link. However, my goal is to make the site functional even with JavaScript disabled.
After exploring various options, I decided to investigate using relatively positioned Anchor tags over the images as an alternative. In my opinion, this method offers better results. Although, I faced challenges when trying to position the anchor tags over the image using percentage-based size and positions - they moved disproportionately every time I resized the browser window.
HTML:
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
<a href="#" class="one"></a>
<a href="#" class="two"></a>
</div>
CSS:
#block img {
max-width: 100%;
display: inline-block;
}
a.one{
height:28%;
width:19%;
top:-36%;
left:1%;
position:relative;
display:block;
}
a.two{
height:28%;
width:19%;
top:37%;
left:36%;
position:absolute;
}
Check out the jsFiddle here for a visual representation of the issue - http://jsfiddle.net/wAf3b/10/. You can see that everything gets skewed when resizing the HTML box.
Any assistance would be greatly appreciated.