Resaltar fragmento de imagen dentro de otra imagen

[merecumbe]

Hola a todos, quisiera solicitarles su ayuda tengo una imagen que corresponde a las comunas de una ciudad, como esta imagen

Como hacer para que cuando el mouse pase por algunas de las regiones del mapa me resalte la region sobre la que esta ubicada y al hacerle clic me lleve a una pagina que tiene informacion sobre esa region

Agradezco cualquier sugerencia mucha gracias

[3nr1c]

Para esto necesitarías tener 11 imágenes: una para cada zona resaltada, y una sin ninguna zona. Luego, usas la etiqueta MAP y armate de paciencia.

Puedes investigar sobre <map> en google, pero aquí tienes un par de cosas:

http://www.w3schools.com/tags/tag_map.asp
http://www.htmlquick.com/es/reference/tags/map.html

Saludos

[JairLizcano]

Bueno, la idea anterior es razonable. Aunque podrías optimizarla estilizando las áreas (hice algunas pruebas y se puede) y cambiar el manipular 11 imágenes por pequeños eventos sobre las áreas.

La anterior sería la opción que podría quitarte algo más de tiempo. Pero tienes opciones más sencillas, como bien utilizar Xmap para la creación de mapas:

Enlace: http://www.carlosag.net/tools/xmap/

Y aún mejor, un plugin de jQuery:

Enlace: http://davidlynch.org/projects/maphilight/docs/

Éste último no podría ser más acertado para lo que buscas:

Demo: http://davidlynch.org/projects/maphi.../demo_usa.html

Espero te sirva.

Buena suerte.