jquery - 同じ画像の異なるホバー領域

Question

以下は可能ですか？

必要なホバー領域と同じ量の断片に画像をスライスせずに、さまざまなホバー「検出」領域を持たせたい画像が1 つあります。これは既知のテクニックですか、それとも画像をスライスすることをお勧めしますか?

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

上記が推奨される場合、どうすればそれを達成できますか?

Answer 1

その画像を背景としてコンテナを作成し、divそのコンテナ内に と を使用して、それぞれ異なる ID を持つ 4 つの を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

絶対位置の Div を画像の上に配置してください!

相対配置された div で画像をラップする必要があります。

<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>