2

画像をマッピングするための<map>とがあることは知っています。<area>これのポリゴンモードを使いたい。

divしかし、背景画像を持つ要素があり、背景画像を のようにマップしたいと想像してみてください<img>。

私の形は長方形でも正方形でもありません。それは多角形です。そして、透明な div トリックを使用したくありません。

これをどのようにマッピングできますか？

4

1 に答える 1

4

opacity:0div の上に配置されたイメージマップで透明なイメージを (たとえば で) 使用します。この効果は、ImageMapsterプラグインの仕組みです。

これらの効果がどのように機能するかを説明するブログ投稿を書きました。要するに、必要なものの上に 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>
于 2013-04-15T12:36:44.547 に答える