Получение связанного изображения из области HTML

Question

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

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');
}

В зависимости от того, что вы хотите сделать после захвата события, вам придется вернуть либо «true», чтобы URL-адрес мог выполнить действие, либо «false», чтобы выполнить альтернативное действие.

Answer 2

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