javascript - maphilight - etiqueta map html

Usando JQuery hover con mapa de imagen HTML

Question

Tengo una imagen de fondo complicada con muchas regiones pequeñas que necesitan elementos destacados de la ilustración de desplazamiento, junto con una pantalla de texto adicional y enlaces asociados para cada una. La ilustración final apila varias imágenes estáticas con transparencia usando z-index, y las ilustraciones de rollover de resaltado deben mostrarse en una de las capas "intercaladas" intermedias para lograr el efecto deseado.

Después de algunos intentos infructuosos de bloquear bloques, decidí que esto podría hacerse con un mapa de imágenes de la vieja escuela. Hice un mapa de prueba esquemático con cuatro contornos de forma geométrica y los "llené" usando con vuelcos png. La idea es asociar el mapa de imagen con la capa de fondo inferior, inicializar todas las reinversiones con css {visibility: hidden} y usar el método de desplazamiento de Jquery para hacerlas visibles y revelar el texto asociado en un div separado. La función de texto por separado es la razón por la que no estoy intentando hacer esto con el pseudoclases: hover en lugar de jQuery. Debido a que estaba usando el mapa de imagen, hice que todos los pngs de rollover (que tienen fondos transparentes) tengan el tamaño del contenedor completo para una ubicación exacta, de modo que todo se alinea con precisión.

Lo que obtuve funciona ... ¡no realmente! El mapa de imagen está correlacionado correctamente para activar solo las áreas geométricas. Pero el href de cada área de rollover solo funciona de manera intermitente, y usar Jquery hover con visibilidad css está en mal estado. El comportamiento deseado es que rodar hacia el área simplemente haría que la forma sea sólida. Lo que sucede en realidad es que cualquier movimiento dentro de la forma hace un rápido cambio de visible a oculto; cuando el cursor se detiene dentro de la forma, es posible que esté visible o no. ¡Alguna idea apreciada!

configuración de desplazamiento de muestra (en última instancia usaré matrices para transferencias reales, enlaces asociados y texto):

$(''#triangle'').hover(
    function() {
        $(''#ID_triangle'').css({''visibility'' : ''visible''});
    },
    function() {
        $(''#ID_triangle'').css({''visibility'' : ''hidden''});
    }
)

mapa de imagen:

<div id="container">
    <img src="images/testMap_w.png" width="800" height="220" alt="TestMap W" usemap="#testMap">
    <map name="testMap">
        <area shape="polygon" coords="20,20,106,20,106,106,20,106" href="http://www.stackoverflow.com" id="box" />
        <area shape="polygon" coords="216,50,339,50,277,156" href="http://www.google.com" id="triangle" />
        <area shape="polygon" coords="460,0,574,0,460,220" href="http://www.cnn.com" id="bordertriangle" />
        <area shape="polygon" coords="704,65,769,115,744,196,665,196,640,115" href="http://slashdot.org" id="pentagon" />
    </map>
    <img src="images/testMap_box.png" width="800" height="220" alt="TestMap Box" id="ID_box">
    <img src="images/testMap_triangle.png" width="800" height="220" alt="TestMap Triangle" id="ID_triangle">
    <img src="images/testMap_border_triangle.png" width="800" height="220" alt="TestMap Border Triangle" id="ID_bordertriangle">
    <img src="images/testMap_pentagon.png" width="800" height="220" alt="TestMap Pentagon" id="ID_pentagon">
</div>

Answer 1

Aunque el plugin jQuery Maphilight hace el trabajo, se basa en el mapa de imagen detallado obsoleto en su html. Preferiría mantener el mapa coordinado externo. Esto podría ser como JS con el plugin de mapa de imagen de jquery, pero carece de estados de desplazamiento. Una buena solución es la visualización geomap de Google en flash y JS. Pero el futuro opensource para este tipo de datos vectoriales es svg, considerando el soporte svg en todos los navegadores modernos, y googles svgweb para un flash convert para IE, ¿por qué no un plugin jquery para agregar enlaces y hoverstates a un mapa svg, como el demo JS? here ? De esa forma también evitarás el paso complejo de transformar un mapa vectorial en coordenadas de mapa de imagen.

Answer 2

Deberías echarle un vistazo a este plugin:

https://github.com/kemayo/maphilight

y la demo:

http://davidlynch.org/js/maphilight/docs/demo_usa.html

en todo caso, es posible que pueda pedir prestado un código para arreglar el suyo.

Answer 3

Encontré este maravilloso script de mapeo ( mapper.js ) que he usado en el pasado. Lo que es diferente es que puede pasar el cursor sobre el mapa o un enlace en su página para resaltar el área del mapa. Lamentablemente está escrito en javascript y requiere una gran cantidad de codificación en línea en el HTML. Me encantaría que esta secuencia de comandos se transfiera a jQuery: P

¡Además, revisa todas las demos! Creo que este ejemplo casi podría convertirse en un simple juego en línea (sin usar el flash): asegúrate de hacer clic en los diferentes ángulos de la cámara.

Answer 4

Esta pregunta es antigua, pero quería agregar una alternativa a la respuesta aceptada que no existía en ese momento.

Image Mapster es un plugin de jQuery que escribí para resolver algunas de las deficiencias de Map Hilight (y al principio era una extensión de ese complemento, aunque desde entonces ha sido casi completamente reescrito). Inicialmente, esto era solo la capacidad de mantener el estado de selección para las áreas, corregir los problemas de compatibilidad del navegador. Sin embargo, desde su lanzamiento inicial hace algunos meses, he agregado muchas características, incluida la posibilidad de utilizar una imagen alternativa como fuente de los aspectos más destacados.

También tiene la capacidad de identificar áreas como "máscaras", lo que significa que puede crear áreas con "agujeros" y, además, crear agrupaciones complejas de áreas. Por ejemplo, el área A podría causar que se resalte otra área B, pero el área B en sí misma no respondería a los eventos del mouse.

Hay algunos ejemplos en el sitio web que muestran la mayoría de las características. El repositorio github también tiene más ejemplos y documentación completa.