1

ページにいくつかの同一の画像があり、すべて同じ地図に関連付けられているとします。

<img id="img1" usemap="#my-map" .... >
<img id="img2" usemap="#my-map" .... >
<img id="img3" usemap="#my-map" .... >

<map name="my-map">
  <area  .... coords=... class="foo">
  <area ....  coords=... class="bar">
</map>

各 AREA にはマウスオーバー イベントハンドラがあります。

これらのエリアの mouseover eventhandlers のスコープ内で、つまり、グローバル変数ではなく、エリアの mouseover イベントに対してローカルな変数のみを参照すると、マウスがどの画像上にあるかを知ることができますか? DOM によって公開される一時的な関係があるので、領域のマウスオーバー イベント ハンドラは、「現時点でマッピングしている画像はどれですか?」という質問に答えることができます。

ハンドラーを画像自体に直接アタッチすることは避けてください。私は問題を解決しようとしているわけではありませんが、現在関連付けられている、または「ホット」な画像について、領域のマウスオーバー イベントハンドラー内で何がわかるかを調べようとしています。

ありがとう

4

1 に答える 1

0

このようなものを使用してIDを見つけることができます。

$('area').bind('mouseover',function(e) {
    alert(e.fromElement.id); // will alert the ID of the image
})​;

fromElementsrc、outerHTML などから取得できる情報は他にもたくさんあります。最善の策は、console.log(e); を使用することです。Google Chrome または Firefox の Firebug を使用して、コンソールにダンプされた内容を調べます。

編集このアプローチはせいぜい気まぐれであり、依存すべきではありません。で利用できるeものは、バインドしているものと、取得している機能 (クリック、マウスオーバーなど) によって決定されるようです。

于 2010-09-05T23:44:27.833 に答える