Página 1 de 1
Mapa de imágenes con "OnMouseOver" y "OnMouseOut"
Publicado: 21 Dic 2008, 22:58
por matgon
Hola... estoy empezando con html más avanzado y quiero saber como hago para que me funcione en Mapa de imágenes el "OnMouseOver" y "OnMouseOut"... por ejemplo si tengo este código:
<img src="
¿ACA VA LA IMAGEN PRINCIPAL?" width="290" height="35" border="0" usemap="#map" />
<map name="map">
<area shape="rect" coords="0,0,284,30" onmouseover="
¿COMO PONGO LA IMAGEN QUE QUIERO QUE HAGA ESTE EFECTO?" onmouseout="
¿Y ACA QUE HAGO?" href="http://" />
</map>
Si me pueden ayudar GRACIAS!!
Re: Mapa de imágenes con "OnMouseOver" y "OnMouseOut"
Publicado: 22 Dic 2008, 11:01
por xoom
En el primero código debes poner la imagen que quieras que aparezca al cargar la página.
En el segundo código, el valor de onmouseover debe ser la url de la imagen que quieras que aparezca cuando se pase el ratón por la imagen del primer código. El valor en onmouseout es para que al quitar el cursor, el script haga algo. Viendo ese código supongo que lo que quieres es que una imgen cambie al parsar el cursor sobre ella y que al pulsarla te abra una ventana con la url especificada. En este caso en onmouseout no tienes que especificar nada.
Re: Mapa de imágenes con "OnMouseOver" y "OnMouseOut"
Publicado: 23 Dic 2008, 00:30
por matgon
yo probe este pero no me funcionó :
Código: Seleccionar todo
<img src="http://images.fenixargentina.losforos.es/pro_six_0b.gif" width="290" height="35" border="0" usemap="#map" />
<map name="map">
<area shape="rect" coords="0,0,284,30" onmouseover="http://images.fenixargentina.losforos.es/pro_six_2b.gif" onmouseout="http://images.fenixargentina.losforos.es/pro_six_1b.gif" href="http://" />
</map>
Re: Mapa de imágenes con "OnMouseOver" y "OnMouseOut"
Publicado: 23 Dic 2008, 00:45
por xoom
Prueba con este código, siempre que lo que quieras es que al pasar el cursor sobre la imagen, esta cambie
Código: Seleccionar todo
<script language=JavaScript>
<!--
imagen1=new Image
imagen1.src="imagen1.gif"
imagen2=new Image
imagen2.src="imagen2.gif"
// -->
</script>
<P><a href="http://www.url.com" onmouseover=op1.src=imagen2.src
onmouseout=op1.src=imagen1.src><img src="jsim1.gif" border=0 width=30
name=op1></a>
imagen1 y 2, la url de las imágenes. En
http://www.url.com" onclick="window.open(this.href);return false;, la url que dirigirá al pulsar sobre la imagen.