Obtener img asociado del área HTML

Question

Hay dos elementos img que usan el mismo mapa con un área. Ahora, nos unimos p. un controlador de eventos de clic para el elemento área . ¿Es posible determinar desde el controlador de eventos en qué instancia de imagen se ha hecho clic?

Answer 1

Sí, puede determinar en qué imagen se hizo clic:

1. adjuntar un único controlador de eventos en un elemento padre e inspección la propiedad event.target
2. adjuntando controladores de eventos individuales en cada elemento de la imagen.

Por ejemplo, si su HTML se ve así:

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

entonces las posibles soluciones son:

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

Dependiendo de lo que desee hacer después de capturar el evento, deberá devolver 'verdadero' para permitir que la URL siga, o 'falso' para realizar una acción alternativa.

Answer 2

Una posible solución es usar su propiedad offsetParent . De esta manera, obtengo el padre, que es lo que originalmente necesitaba. Encontrar la imagen en sí tampoco debería ser demasiado difícil, siempre que las imágenes estén contenidas en diferentes div s.