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

Answer 2

2 possibilities:

1. Cut the image into the smaller images on which you can use "click" event. Works only if you have control on the background image.
2. You have to use dynamically generated image map. You know your image size and offsets of the products on the image. You can detect the screen size. Appropriately calculate the offsets of the products and generate an image map dynamically.