HTML領域から関連する画像を取得する

Question

imgの要素があり、同じ内容のを1つ使用します。さて、 clickイベントハンドラをエリア要素に設定します。どのイメージインスタンスがクリックされたのかをイベントハンドラから判断できますか？

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に含まれていれば、画像そのものを見つけることもあまり難しくありません。