Siguiendo este truco podrás hacer que una imagen cambie por otra cuando el ratón pase por encima (rollover). Para ello es necesario introducir un script que realice una precarga de las imágenes implicadas en el efecto, para que no haya que esperar a que se descargen las imagenes justo cuando el ratón pase por encima.
El código necesario es el siguiente:
| <html> <head> <title>Efecto 1</title> </head> <script language="JavaScript"> <!-- function preCarga() { if (!document.images) return; var ar = new Array(); var argumentos = preload.argumentos; for (var i = 0; i < argumentos.length; i++) { ar[i] = new Image(); ar[i].src = argumentos[i]; } } window.onload=" preCarga( ' imagenoff.gif ', ' imagenon.gif ', ' imagen3.gif ' )" ; --> </script> <body> Pasa el raton por aqui: <a href=" loquesea.html " OnMouseOver ="document.images[' ejemplo '].src=' imagenoff.gif '" OnMouseOut ="document.images[' ejemplo '].src=' imagenon.gif ' "><img src=" imagenon.gif " border=0 name=" ejemplo "></a> </body> </html> |
En la línea 16 (window.onload="precarga.....) tienes que cambiar los nombres de las imágenes que aparecen por las que uses en tu web.
Si queremos aplicar este script a más imágenes, solo hace falta que cada una tenga su versión "presionada" y que estén pre-cargadas. Luego, repetimos el último paso para cada una cambiándo el nombre para cada imagen. Pueden ser ejemplo2, ejemplo3, etc...
Otro efecto 'interesante' puede ser cambiar los eventos OnMouseOver y OnMouseOut por OnMouseDown y OnMouseUp respectivamente. Esto hará que la imagen cambie al pulsarla y no al pasar por encima.
Original de fuikas.tk
Usuarios que han visto este tema también han visto...
- Diferencias entre Java y Javascript
- Iluminación Gradual de Imágenes
- Detectar el idioma y país del usuario con Javascript
- Mostrar una imagen distinta cada vez que se carga la página en JavaScript
- Imprimir página con JavaScript
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2011 Factoría de Internet S.L.. Todos los derechos reservados.