链接在响应的图像背景的某个位置上

我有一个任务要做，我无法找到目标的解决方案或方向。

任务

此任务需要一些位于图像完整背景中的链接。 该图像中包含一些产品，并且链接需要位于这些产品之上，考虑到屏幕可以更宽或者不宽，因此图像背景可以拉伸，因此链接的位置也必须适应。 知道怎么做吗？

试用

我已经尝试了

和

标签，但与平板电脑的兼容性可能很棘手。 另一个很大的问题是我可以指定它的位置，但我不能在这些元素上放置任何图像或CSS。 也许解决方案是jquery？ 有任何想法吗？

HTML

 
   O   O   

因此，热点是我认为绝对位于某个位置的链接。 也许您有其他输入或指示可供遵循？

提前致谢！！！！

小提琴：

http://jsfiddle.net/uDCuB/

Answer 1

一种可能的方案：

1. 响应图像的样式应为width: 100%; height: auto; width: 100%; height: auto;
2. 以百分比而非像素计算热点位置**
3. 使用绝对相对定位

在这里演示

话虽如此，如果你有一个图像和一个图像映射，你可以使用jQuery：

1. 将图像包裹在相对定位的容器中
2. 通过解析图像映射中的area标记来创建绝对定位的链接
3. 放弃usemap属性和


   标记

4. 重新计算窗口大小的位置

** 例如：

• 如果您的图像宽1000像素，高200像素
• 热点坐标为（50,50） – （100,100）
• 对于图像地图，这映射到（5％，25％） – （10％，50％）
• 对于绝对定位，此贴图向左：5％，顶部：25％，宽度：5％，高度：25％

Answer 2

2种可能性：

1. 将图像剪切成可以使用“单击”事件的较小图像。 仅在您控制背景图像时才有效。
2. 您必须使用动态生成的图像映射。 您知道图像大小和图像上产品的偏移量。 您可以检测屏幕大小。 适当地计算产品的偏移量并动态生成图像映射。