jquery - 相同的图像不同的悬停区域

Question

以下是否可能：

我有一张图像，我希望在其中有不同的悬停“检测”区域，而不会将图像切成与我想要的悬停区域相同数量的片段。这是一种已知的技术还是更喜欢对图像进行切片？

例如： http: //postimage.org/image/v6riryiov/

如果以上是推荐的，我该如何完成？

Answer 1

您可以拥有一个以该图像作为背景的容器，然后div在该容器内定义 4 个，每个具有不同的 id，使用width和height。类似于以下内容：

<div id="container">
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
</div>

CSS

#container { width:800px; height:800px; background:url(path/to/img.png) no-repeat }
#container > div { height:800px }
#d1, #d2 { width: 300px }
#d3 { width: 100px }
#d4 { width: 200px }

Answer 2

将绝对定位的 Divs 放在图像上！

你应该用一个 div 定位的 relativ 来包装图像！

<div style="position: relative;">
<img />
<div id="area1" style="position absolute; top:yourvalue; left: yourvalue;"></div>
<div id="area2" style="position absolute; top:yourvalue; left: yourvalue;"></div>
</div>