Obter img associado da área HTML

Question

Existem dois img elementos que usam o mesmo mapa com uma área. Agora, ligamos, por exemplo, um manipulador de eventos de clique ao área elemento. É possível determinar no manipulador de eventos qual instância de imagem foi clicada?

Answer 1

Sim, você pode determinar em qual imagem foi clicada por:

1. Anexar um único manipulador de eventos no elemento pai e inspecionar a propriedade Event.Target
2. Anexar manipuladores de eventos individuais em cada elemento de imagem.

Por exemplo, se o seu HTML se parece:

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

Então as soluções possíveis são:

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

Dependendo do que você deseja fazer depois de capturar o evento, você terá que retornar 'true' para permitir que o URL siga, ou 'falso' para tomar uma ação alternativa.

Answer 2

Uma solução possível é usar seu OffsetParent propriedade. Dessa forma, entendi o pai, que é o que eu precisava originalmente. Encontrar a imagem em si também não deve ser muito difícil, desde que as imagens estejam contidas em diferentes divs.