Iluminación Gradual de Imágenes

Con este script conseguirás que cualquier imagen se vuelva transparente al pasar el ratón por encima. Se puede usar, por ejemplo, en las imágenes de los menús. De esta forma, si usas varias imágenes para los diferentes estados (sobre, pulsado...), te los podrás ahorrar...

El script es el siguiente:

<html>
<head>
<title>Efecto 1</title>

objetos = new Object();
tiempotrans = new Object();

function transparente(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){
setTimeout("transparente("+object+","+destOp+","+rate+","+delta+")",0);
return;
}

clearTimeout(tiempotrans[object.sourceIndex]);

diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;

if (object.filters.alpha.opacity != destOp){
objetos[object.sourceIndex]=object;
tiempotrans[object.sourceIndex]=setTimeout("transparente(objetos["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}

</script>

</head>
<body>

</body>
</html>

Como en anteriores ejemplos, los eventos onMouseOver y onMouseOut se pueden cambiar por los que más nos interesen.

Los números en azul son los valores de transparencia inicial, tiempo de iluminacion... y los puedes modificar por otras cantidades (los cambias y ves el resultado).

Original de fuikas.tk

Usuarios que han visto este tema también han visto...

- Imagen que se desvanece
- Efecto Nieve
- Validando emails desde JScript
- Contador falso en JavaScript
- Abrir dos márcos con un único cilck en JavaScript

- Versión imprimible de este documento

- Enviar por e-mail este documento