Получение ассоциированных img из области HTML

Question

Есть два элемента: img, которые используют ту же самую map с одной областью. Теперь мы связываем, например. обработчик события щелчка на область элемент. Можно ли определить из обработчика события, на который был нажат экземпляр изображения?

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-адрес, либо «false», чтобы выполнить альтернативное действие.

Answer 2

Возможное решение заключается в использовании его offsetParent. Таким образом, я получаю родителя, и именно этого мне и требовалось. Поиск самого изображения также не должен быть слишком сложным, при условии, что изображения содержатся в разных div s.