javascript - rectangulo - Efectos de desplazamiento sobre polígonos irregulares en CSS

poligonos regulares

Question

Me pregunto cómo hacer para marcar y codificar los efectos de desplazamiento para un mapa similar a esta imagen .

Cuando cada distrito (o sección) se pasa por alto / toca / hace clic, necesito cambiar el color del mismo sin afectar a ninguna otra sección. Los límites en cada sección deben ser representativos de la imagen y no deben ser cuadrados. La solución no puede usar lienzo ya que el sitio en el que estoy trabajando tiene que ser utilizable en navegadores antiguos (estoy destruido, personalmente).

Idealmente, quiero hacer esto con CSS sin usar demasiado JavaScript o muchas imágenes. ¿Alguien ha hecho esto antes?

Editar: Sé que la gente está sugiriendo la etiqueta <area> , pero AFAIK, no acepta la: pseudo clase hover.

Editar 2: podría usar esto: http://www.netzgesta.de/mapper/

Answer 1

Otra auto respuesta ...

Hace unos meses encontré una biblioteca llamada Raphael JS - http://raphaeljs.com/ . Para aquellos que no están familiarizados con él, es una biblioteca SVG DOM principalmente. Si sabe una cosa o dos acerca de SVG, sabrá que IE no es compatible, pero sí es compatible con VML. Raphael atiende esto también. Impresionante, ¿verdad?

De todos modos, terminé guardando el archivo AI para el mapa como un archivo SVG e importando las rutas en un bloque JSON, básicamente haciendo lo mismo que este código: http://raphaeljs.com/australia.html

El único problema que encontré fue:

• Quería que el fondo del mapa fuera transparente. Configurar el relleno a transparente mientras permitía que la sección aceptara mouseover funcionó en Firefox, pero en IE falló. En su lugar opté por llenar el camino con blanco, luego estableciendo la opacidad en 0.01. Después de eso dupliqué la ruta y no la llené para crear el borde.

Answer 2

Puede usar la etiqueta HTML <area>

Answer 3

Si usas jQuery puedes usar el plugin maphilight. documentado en http://davidlynch.org/projects/maphilight/docs/ y disponible en github en https://github.com/kemayo/maphilight

Answer 4

Veo cuál es el problema aquí: hacer que digamos que un mapa del mundo de la manera habitual es bastante pesado. Si lo hago bien, lo que quiero es tener una imagen de mapa de territorio y colocar efectos de desplazamiento que hagan que el área activa coincida exactamente con las fronteras de los países. SVG se puede usar para el mapa (la parte de dibujo ya está hecha) pero el problema es cómo generar un mapa de área HTML usando las coordenadas del mapa SVG. Hay una solución (la he probado, se ve bien al menos con la demostración provista) que traduce SVG en Raphael (genera los coords) usando PHP. Pero nuevamente necesitas raphael.js para eso ... bueno, si cambias de opinión: https://github.com/atirip/svg2raphael . Y si no estás familiarizado con Raphael, te tomará un tiempo acostumbrarte a él, la documentación no es tan buena para mí.

Editar: puedo confirmar que la traducción de SVG-> rapahel.js funciona, pero los archivos SVG necesitan algunos ajustes. Por lo que veo en el SVG de ejemplo provisto en svg2raphael, los archivos fueron creados con Adobe Illustrator. Lo he intentado con SVG (plain) desde Inkscape y no funcionó correctamente, pero pude arreglar los problemas, por ejemplo:

1. svg2raphael no traducirá Inkscape generado <path style="fill:#ff0000" ...></path> (establecerá fill = "none" !!! por lo que el resultado es invisible, pero se traducirá correctamente <path fill="#ff0000" ...></path> Parece que ignorará todo dentro de style = "".
2. svg2raphael malinterpreta las alineaciones de Inkscape SVG, por lo que debe mover la ilustración dentro de Inkscape o editar el archivo SVG con el editor de texto y cambiar el valor M a M0,0.
3. svg2raphael puede traducir múltiples elementos svg, pero mira la etiqueta principal que Inkscape genera para alinear grupos de ilustraciones, a veces toda la ilustración se aleja del área de renderizado y no ves nada. ¡Espero que esto ayude!

Edición 2: Puedes usar el estilo de Inkscape = "" para crear reglas de CSS para aplicar al SVG, que funciona muy bien y mantiene el estilo fuera de SVG / Raphael.