 Estás en: JavaScripts »Efecto Rollover
JavaScripts
Efecto Rollover :
Para conseguir un efecto Rollover sobre una imagen solo tienes que introducir el siguiente código ya escrito JavaScript dentro de las etiquetas <body> y </body>, justo en el lugar donde quieras que aparezca.
Para ello necesitas además dos imágenes: la que se muestra en primer lugar, y la que aparece al pasar el ratón por encima de ésta. Sólo tienes que cambiar el nombre y la ruta de las imagenes del ejemplo por las tuyas. Si tienes problemas a la hora de indicar las rutas, mírate el siguiente tutorial: Rutas
También debes cambiar los valores de anchura y altura (o quitarlos para que muestre el valor real de las imágenes). Cambia también donde dice nombre (en tres lugares) por un nombre a tu gusto , aunque puedes dejarlo como está.
| Código ya escrito |
En el navegador |
<script language="javascript">
<!--
imagenfirst=new Image()
imagenfirst.src="imagen1.gif"
imagentwo=new Image()
imagentwo.src="imagen2.gif"
//-->
</script>
<img
src="imagen1.gif" width="80" height="28"
name="nombre"
onMouseOver="document.images ['nombre'].src=imagentwo.src"
onMouseOut="document.images ['nombre'].src=imagenfirst.src"> |
|
Mira también el siguiente tutorial para conseguir el mismo efecto rollover sin necesidad de usar JavaScript: efecto rollover
|
