Mapa interactivo en HTML efecto onmouseover

[matxwell85]

Hola a todos.

Tengo un problema que me está dando dolores de cabeza. Tengo un blog en blogger, y he creado en él un mapa interactivo. Se trata de una provincia (Soria), dividida en varios municipios. Yo de HTML no tengo ni idea. Lo único que sé es por lo que he ido leyendo en foros. Con eso, lo más que he conseguido es poder seleccionar cada municipio (area) y que aparezca el nombre, y el hipervínculo al que te lleva:

<map name="soria">
<area alt="Alcubilla de Avellaneda" title="Alcubilla de Avellaneda" shape="POLY" coords="95, 218; 90, 209; 89, 201; 67, 206; 67, 193; 69, 191; 69, 186; 80, 185; 80, 181; 84, 180; 85, 176; 92, 176; 100, 187; 105, 187; 105, 197; 102, 201; 111, 213; 107, 215; 98, 216; 95, 218" href="http://lospueblosdesoria.blogspot.com/search/label/Municipio%20de%20Alcubilla%20de%20Avellaneda" />
</map>

Y así con cada municipio. El problema se me plantea a la hora de que al poner el cursor sobre esa zona, yo quiero que se sombree. Es decir, que tengo la imagen principal, que sería el mapa de la provincia, y también tengo el mapa de cada zona, para poder hacer el efecto onmouseover. Pero el problema es que no se muy bien cómo hacer el efecto, si es que me falla en esta parte del script:

<script type='text/javascript'>
function mostrar(cosa, estado) {
// document.images[cosa].style.visibility = (estado) ? 'visible':'hidden';
document.getElementById(cosa).style.visibility = (estado) ? 'visible':'hidden';
}
</script>

O me falla en esta otra parte:

<a><img alt="soria1" src=" http://lh5.ggpht.com/_zl-dqYvA7LQ/TJncIybM2aI/AAAAAAAAEh4/klK-oy5hkaM/MAPA%20BASE%20SORIA.png" usemap="#soria" style="margin: 0; border: 0" /></a>

<img id="alcubilla" src="http://lh5.ggpht.com/_zl-dqYvA7LQ/TJnhmKJDzxI/AAAAAAAAEiY/hCUgM0m9XYQ/ALCUBILLA%20DE%20AVELLANEDA.png" style="position: absolute; top: 0; left: 0; margin: 0; visibility: hidden;" />

O si falla en ésta:

<map name="soria">
<area alt="Alcubilla de Avellaneda" title="Alcubilla de Avellaneda" shape="POLY" coords="95, 218; 90, 209; 89, 201; 67, 206; 67, 193; 69, 191; 69, 186; 80, 185; 80, 181; 84, 180; 85, 176; 92, 176; 100, 187; 105, 187; 105, 197; 102, 201; 111, 213; 107, 215; 98, 216; 95, 218" href="http://lospueblosdesoria.blogspot.com/search/label/Municipio%20de%20Alcubilla%20de%20Avellaneda"
onmouseover="′mostrar(" alcubilladeavellaneda", true)′ onmouseout="′mostrar(" alcubilladeavellaneda", false)′ />
</map>

En fin, que si alguien sabe dónde está el problema o cómo puedo solucionarlo, le agradezco sobre manera la ayuda.

Muchas gracias a todos.

[caricatos]

Hola:

Teniendo las imágenes, es algo complejo, pero no imposible, yo uso una imagen transparente para usar el mapa, y las sombras son imágenes transparentes con el área/sombra visible, y simplemente mostrar/ocultar esa imagen con el evento... puedes verlo en esta página: Capturar áreas en imágenes...

Saludos

[matxwell85]

Gracias por la respuesta, pero no entiendo bien el contenido del link que me has facilitado. Te paso la url de mi blog para que te hagas una idea:

http://lospueblosdesoria.blogspot.com/

[emprear]

matxwell85:
Después de ver tu mapa, no se si se pueda, pero vi esto que es muy interesante...

http://ago.tanfa.co.uk/css/examples/europe-map.html, usa solo una imagen
http://ago.tanfa.co.uk/css/examples/europe2.gif

Con respecto a "tu" mapa, a que se le haría el efecto over, a cada una de las partes del area que está en rosa?


Dime a ver si se me ocurre algo

Saludos

[caricatos]

Hola:

Desde mi link puedes ver el efecto en la imagen que aparece con figuras... simplemente se muestra una imagen superpuesta con los bordes dibujados, aunque se podría editar y cambiar o añadir otras cosas.

Y si tu imagen tuviese colores planos, podrías subirla y obtener tanto las areas como la imágen de sustitución... pero por lo que he visto, deberías aplanar los colores de tu imagen antes.

Saludos

[lgaribi]

Otra opcion es [URL="http://davidlynch.org/js/maphilight/docs/"]jquery maplight[/URL], no tendrías que modificar mucho de lo que ya tienes y conseguirías el efecto que estas buscando...

Yo he hecho un mapa con esta aplicación y me va muy bien: http://mexicoboutiquehotels.com/mexico/regions/

Saludos!

[matxwell85]

Emprear.

Gracias por la respuesta. A tu pregunta de "Con respecto a "tu" mapa, a que se le haría el efecto over, a cada una de las partes del area que está en rosa?", las áreas en "rosa" son los municipios que he visitado de momento, eso estaría visible. Cuando el ratón se colocara sobre una de esas áreas, o sobre las que no están en rosa, lo que yo quiero es que aparezcan en otro color. Por ejemplo, azul, para indicar así que se está señalando ese municipio y no otro.

Caricatos.

Estoy estudiando tu propuesta de hacer una imagen con transparencia de cada área (municipio), con colores planos, para realizar el efecto.

lgaribi.

Te agradezco mucho la ayuda, y me parece interesante y casi el más idóneo el efecto que me planteas, pero si poco o casi nada entiendo de HTML, con CSS que no lo he mirado, pufffff.... jejeje . Aún así, muchas gracias.

Muchas gracias a todos por la ayuda. Lo único pediros si sabeis lo que tendría que poner en la parte de <head> </head>, para que las cosas que me vais diciendo funcionen. Ya os digo, yo de HTML lo justo, así que si me podeis poner el código entero y por ejemplo: IMAGEN A, para el mapa estático, e IMAGEN B, para la imagen que aparece al poner el ratón encima del área; os lo agradecería, para poder orientarme. Muchas, muchas, muchas gracias.

[matxwell85]

Hola a todos.

¡COMPAÑEROS, HE ENCONTRADO LO QUE BUSCABA!

Pero ahora tengo un problema: no sé que parte del código del HTML de esa página he de sacar para que mi mapa salga igual que el que tiene del Mundo. El ha conseguido el efecto que yo quiero de poner el cursor sobre un determinado país y que se sombree en rojo, además de poner el nombre. Eso es lo que yo busco, solo que en vez del mundo en mi mapa de la provincia de Soria. La página en cuestión es la siguiente: http://www.netzgesta.de/mapper/

He sacado el código HTML completo de su página, y lo he estado mirando. Pero como mi idea es justita del HTML, no sé que es lo que tengo que sacar de la parte del <HEAD> </HEAD>, o de la parte posterior al mapa <MAP> </MAP>. Si me podeis ayudar con esto habré solventado el problema. Además, cuando lo haga, colgaré el código sin mis imágenes, coordenadas y cosas por el estilo, explicando paso por paso cómo hacerlo, porque la verdad, no quiero que nadie se pase el tiempo que me he pasado yo intentándolo hacerlo.

MUCHAS GRACIAS A TODOS Y ESPERO VUESTRAS RESPUESTAS.

[emprear]

matxwell85:

no tenés que ver el código de su página, tenes que bajarte la script y la demo.
La documentación es muy amplia y no la implemente, pero la baje y funciona, tenés que empezar a leer las instrucciones y ver el ejemplo


saludos

[mario1ixoy]

Hola que tal he encontrado esta libreria de jquery maphilight pero no se como usarla
por ejemplo esta es la parte de codigo de una seccion
<area href="#" title="WA" shape="poly" coords="90,25, 94,27, 104,29, 112,31, 131,37, 154,42, 169,46, 168,50, 165,63, 160,83, 157,99, 157,108, 143,105, 128,101, 113,101, 113,100, 108,102, 103,102, 101,100, 100,101, 95,100, 94,99, 89,97, 88,97, 84,96, 82,98, 76,97, 70,93, 71,92, 71,85, 69,81, 65,81, 64,78, 62,78, 60,76, 58,77, 56,74, 56,72, 59,71, 61,67, 58,66, 58,63, 62,62, 60,59, 58,53, 59,50, 59,42, 57,39, 59,30, 62,30, 64,33, 67,36, 70,38, 74,40, 77,40, 80,42, 83,43, 85,42, 85,40, 87,39, 89,38, 89,39, 89,41, 87,41, 87,43, 88,44, 89,47, 90,49, 92,48, 92,47, 91,46, 90,43, 91,41, 90,40, 90,38, 92,34, 91,32, 89,27, 89,26, 90,25"></area>

pero no se que como cambiar las coordenadas ¡ alguien me podria a yudar?