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

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 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%