Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/09/2010, 05:05
matxwell85
 
Fecha de Ingreso: septiembre-2010
Mensajes: 4
Antigüedad: 14 años, 3 meses
Puntos: 0
Mapa interactivo en HTML efecto onmouseover

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.