link on certain position of an image background which is responsive

问题

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/

回答1:

One possible solution:

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

Demo here

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

Wrap the image in a relative positioned container
Create absolutely positioned links by parsing area tags in image map
Discard usemap attribute and the <map> tag
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%

回答2:

2 possibilities:

Cut the image into the smaller images on which you can use "click" event. Works only if you have control on the background image.
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.

来源：https://stackoverflow.com/questions/21375747/link-on-certain-position-of-an-image-background-which-is-responsive

标签

javascript

jquery

css

image

responsive-design