¿Cómo hacer mapas de área de imagen posicionados de forma absoluta haciendo clic con el mouse?

Question

Tengo varias imágenes colocadas una encima de la otra usando un posicionamiento absoluto. Estas imágenes son parcialmente transparentes y tienen un html area y map para que solo se pueda hacer clic en las partes visibles. En jQuery, he adjuntado eventos de mouse a las etiquetas area.

Esto funciona bien para una imagen: mouseenter y mouse dejan de disparar solo cuando se ingresa la parte mapeada de la imagen.

El problema es que solo funciona para la imagen superior. Para todos los demás, no activa eventos, el uso de CSS no funciona, porque hay otra imagen encima. Esto a pesar del hecho de que area s no se superponen y map s están delante de las imágenes.

Aquí es una manifestación del problema: http://markv.nl/stack/imgmap2/

Answer 1

se puede colocar una sola imagen, completamente transparente en la parte superior de todas las imágenes individuales, y conectar todas las zonas ImageMap a esa imagen. Actuará como un elemento de captura para los eventos del mouse, y aún puede cambiar todas las imágenes individuales.

Answer 2

No es una respuesta/solución directa ...

¿Por qué no usar un lienzo/SVG para hacer el dibujo? Hay muchas bibliotecas que facilitan la tarea. Uno de ellos es RaphaëlJS (marque example). La ventaja de esta biblioteca es que permite la interactividad del mouse.

Otra biblioteca que puede considerar es EaselJS, pero no funciona en los navegadores que no son compatibles con <canvas>, por lo que no es compatible con IE < 9.

Answer 3

Funciona solo si las imágenes no se superponen (consulte la figura). En su caso, todas las imágenes tienen exactamente el mismo tamaño y se acumulan una sobre la otra. Dado que los navegadores tratan las imágenes como objetos sólidos (no se preocupan por la transparencia), no hay forma de cómo podría determinar, ¿qué imagen desea suspender en este momento?

+-----------+-----------+ 
    |   |   | 
    | img1 | img2 | 
    |   |   | 
    |   |   | 
    +-----------+-----------+ 
    |   |   | 
    | img3 | img4 | 
    |   |   | 
    |   |   | 
    +-----------+-----------+ 

Sin embargo, puede evitar esto:

sólo tiene que utilizar un único mapa de imágenes en una de las imágenes que contienen todas las áreas, y con un poco de JavaScript Puede desencadenar los libración efectos sobre los demás imágenes.

$("area").hover(function(){ 
    var $target = $("#"+$(this).data("target")); // getting the target image 
    $target.attr("src",$target.attr("src").replace("slice","slice-focus")); //replacing the src with the src of the hover image 
},function(){ 
    var $target = $("#"+$(this).data("target")); 
    $target.attr("src",$target.attr("src").replace("focus-","")); //revert the changes 
});​ 

Ejemplo de trabajo basado en su código: jsFiddle-Demo

Answer 4

También puede palacio div transparente con altura fija y anchura que tendrá onclick evento() con la función de encuadernado. algo como:

<div style="position: absolute; top: 10px; left: 10px; width: 100px; height: 100px;" onclick="dosomething();"></div>