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

- Escribir texto vertical en JavaScript
- Coger Variables
- Pop-Up para imágenes en un mismo archivo en JavaScript
- Iluminar Tabla
- Manejo de errores con JavaScript

- Versión imprimible de este documento

- Enviar por e-mail este documento