映射元素的背景图像

Question

我知道我们有<map>和<area>用于映射图像。我想使用这个多边形模式。

但是，想象一下，我有一个div元素与背景图像，我想映射像<img>背景图像。

我的形状不是矩形或正方形;这是一个多边形。我不想使用透明的div技巧。

如何映射此？

Answer 1

使用一个带有imagemaps的透明图像（例如opacity:0），放置在div上。这种效果是ImageMapster插件的工作原理。

我写了一个blog post，解释了这些效果如何工作。它的长短，你可以在任何你想要的顶部使用HTML图像映射。所有你需要做的就是确保img具有最高的z-index，并且是透明的，并且绝对位于你想让最终用户实际看到的元素之上。如果它是透明的，最终用户将只能看到背后的内容，从而使您可以灵活地使用图像映射的多边形位置跟踪功能，以及任何其他类型的元素，如div。

例子：

<div id="container"> 
    <img style="position: absolute; top: 0; left: 0; opacity: 0; 
       width: 100px; height: 100px;" 
     src="/placeholder.jpg" 
     usemap="#my-image-map"> 
    <div style="position: absolute; top: 0; left:0; 
       background-image: url(/some-100-by-100-pixel-image.jpg)"> 
</div>