html - maphilight - Aplicar CSS a AREA MAP

map area css

Question

Me crearon un mapa muy grande con muchas áreas poli (más de 20 coordenadas cada una) para regiones dentro del mapa. Sin embargo, no puede agregar css a la etiqueta AREA ya que me dijeron que no es un elemento visible. Lo que quiero hacer es cuando el usuario pase el ratón sobre un área en el mapa, quiero que se "resalte" aplicando un borde de 1px al elemento AREA específico. ¿Hay alguna forma de hacer esto? No, no voy a recurrir al uso de rectángulos.

Answer 1

No es posible con CSS.
Sin embargo, puedes consultar el plugin de Map Hilight jQuery.

EDIT 10.2011
ImageMapster es un plugin más reciente y más potente que también debería consultar.

Answer 2

No, no hay forma de hacer esto como describes. Lo investigué y probé. Lo que puede hacer es configurar los eventos mouseover en los distintos segmentos y cambiar alguna imagen superpuesta sombreada en la misma área.

Answer 3

Si desea poder utilizar formas arbitrarias y seguir utilizando estilos, ¿ha considerado probar SVG?

No soy un maestro de SVG, pero he aquí un ejemplo que impulsé: http://jsfiddle.net/tZKuv/3/ . Para la producción es posible que desee reemplazar el trazo por defecto con none , utilicé gray para que pueda ver dónde está.

La desventaja es que perderás la facilidad de uso del mapa / área, pero imagino que puedes lograr tu objetivo si sigues esta ruta. Agregué cursor: pointer al polígono y puede agregar manejadores onclick para simular el href de <area> .

Una advertencia obvia es el soporte del navegador. Esto parece estar funcionando en Chrome, y estoy bastante seguro de que debería funcionar en IE9 (jsfiddle no funciona en IE9 en este momento), pero las versiones anteriores de IE no son compatibles con SVG.

Actualización : hizo una página de prueba rápida para probar IE9. De hecho, funciona como se esperaba. Aquí está la fuente .

Actualizar nuevamente : Esto también resolvería el problema de acercamiento que hiciste en otra pregunta.