Hola.
Aquí la web:
http://www.mundoalicante.net/index_archivos/prueba3.htm
Me gustaría hacer, que cuando se pase el cursor del ratón por los enlaces, la imagen cambiara.
¿Cuál es el error?
Aquí el código:
<html><head><title>Prueba de mover el ratón</title>
<script type='text/javascript'>
function mostrar(cosa, estado) {
document.images[cosa].style.visibility = (estado) ? 'visible':'hidden';
}
var area1 = 'area1';
var area2 = 'area2';
var area3 = 'area3';
var area3 = 'area4';
</script>
</head><body>
<div id='contenedor_de_imagenes' style='position: relative;' >
<p align="center">
<img name='area1' src='mundoalicante_foro.jpg' alt='' style='position: absolute; top: 0; left: 0; margin: 0; visibility: hidden;' />
<img name='area2' src='mundoalicante_centrocomercial.jpg' alt='' style='position: absolute; top: 0; left: 0; margin: 0; visibility: hidden;' />
<img name='area3' src='mundoalicante_blog.jpg' alt='' style='position: absolute; top: 0; left: 0; margin: 0; visibility: hidden;' />
<img name='area4' src='mundoalicante_chat.jpg' alt='' style='position: absolute; top: 0; left: 0; margin: 0; visibility: hidden;' />
<img src='mundoalicante_botones.jpg' usemap='#mapa' style='position: absolute; top: 0; left: 0; margin-right:0; margin-bottom:0' />
</div>
<map id='mapa' name="mapa">
<area name='area1' shape='rect' coords='824, 291, 1119, 486' onmouseover='mostrar("area1", true)' onmouseout='mostrar("area1", false)' href='http://www.mundoalicante.net/foro' >
<area name='area2' shape='rect' coords='451, 473, 763, 648' onmouseover='mostrar("area2", true)' onmouseout='mostrar("area2", false)' href='http://mundoalicante.net/centrocomercial' >
<area name='area3' shape='rect' coords='315, 277, 662, 464' onmouseover='mostrar("area3", true)' onmouseout='mostrar("area3", false)' href='http://mundoalicante.net/blog' >
<area name='area4' shape='rect' coords='598, 123, 895, 259' onmouseover='mostrar("area4", true)' onmouseout='mostrar("area4", false)' href='http://mundoalicante.net/chat' >
</map>
</body></html>