javascript - link on certain position of an image background which is responsive

Question

I've got a task to do and I'm not able to find a solution or direction in which to target.

Task

This task needs some links positioned in a image full background. This image has some products inside it and the links need to be on top of these products, taking into consideration that the screen can be wider or not so the image background could stretch and therefore the position of the links would also have to adapt. Any idea how to do this?

Tryout

I tried already the <map> and <area> tags but the compatibility with tablets can be tricky. Also a great issue is that I can specify its position but I cannot place any image or CSS on these elements. Maybe the solution is with jquery? Any ideas?

HTML

<div class="hotspots-image">
    <img class="image" src="IMAGE" class="imagemap"/>

    <a class="hotspot" href="#">
        <span class="hotspot-icon">O</span>
    </a>
    <a class="hotspot" href="#">
        <span class="hotspot-icon">O</span>
    </a>
</div>

So the hotspot is the links which I suppose would be positioned absolute and in a certain position. Maybe you have other inputs or directions to follow?

Thanks in advance!!!!

Fiddle:

http://jsfiddle.net/uDCuB/

Answer 1

One possible solution:

1. Responsive image should be styled as width: 100%; height: auto;
2. Calculate the hotspots position in percentages instead of pixels**
3. Use absolute-relative positioning

Demo here

Having said that, if you have an image and an image map, you can use jQuery to:

1. Wrap the image in a relative positioned container
2. Create absolutely positioned links by parsing area tags in image map
3. Discard usemap attribute and the <map> tag
4. Recalculate position on window resize

** For example:

• If your image is 1000px wide and 200px tall
• Hotspot coordinates are (50,50) - (100,100)
• For image maps this maps to (5%,25%) - (10%,50%)
• For absolute positioning this maps to left: 5%, top: 25%, width: 5%, height: 25%