Question

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

任务

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

试模

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

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>

所以热点是我认为绝对位于某个位置的链接。也许您还有其他意见或指示可供使用？

提前致谢!!!!

小提琴：

http://jsfiddle.net/uDCuB/

Answer 1

一种可能的解决方案：

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

Demo here

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

将图像包裹在相对定位的容器中
通过解析图片地图中的area标记
放弃usemap属性和<map>标记
重新计算窗口调整大小的位置

**例如：

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

Answer 2

2种可能性：

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

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

2 个答案: