|
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
|
