HTMLエリアから関連するimgを取得する

Question

1つの領域で同じ map を使用する2つの img 要素があります。今、バインドします area 要素へのクリックイベントハンドラー。どの画像インスタンスがクリックされたかをイベントハンドラから判断できますか？

Answer 1

はい、次のいずれかの方法でクリックされた画像を判別できます：

1. 単一のイベントハンドラを接続する 親要素と検査中 event.targetプロパティ
2. 個々のイベントハンドラーの接続 各画像要素で。

たとえば、HTMLが次のような場合：

<div id="container">
    <img id="myimage1" usemap="theMap" />
    <img id="myimage2" usemap="theMap" />
    <map name="theMap">
    ...
    </map>
</div>

次に、可能な解決策は次のとおりです。

1）

document.getElementById('container').onclick = function(evt) {
    var target = evt.target || window.event.srcElement;

    switch(target.id) {

        case 'myimage1':
            alert('you clicked on myimage1');
            break;

        case 'myimage2':
            alert('you clicked on myimage2');
            break;

        default:
            // click handler got some other evet
    }
}

2）

document.getElementById('myimage1').onclick = function() {
    alert('you clicked on myimage1');
}
document.getElementById('myimage2').onclick = function() {
    alert('you clicked on myimage2');
}

イベントをキャプチャした後の処理内容に応じて、URLがフォロースルーできるように「true」を返すか、代替アクションを実行するには「false」を返す必要があります。

Answer 2

可能な解決策は、 offsetParent プロパティを使用することです。この方法で、元々必要な親を取得します。画像が異なる div に含まれている場合は、画像自体を見つけることも難しくありません。