映射元素的背景圖像

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>