Links con fade en Javascript

Hoy les enseñare a hacer el famoso pero simple links con fade.

El efecto consiste en un cambio progresivo del color de los vinculos de la página al pasarles el mouse por encima.

El codigo es el siguiente:

/*************
**** <config>
**/
startColor = "#000000"; // Color al sacar el mouse
endColor = "#FFFFFF"; // Color al pasar el mouse

stepIn = 20; // retraso de fade in
stepOut = 20; // retraso de fade out

/*
** poner true o false, true
** da efecto a todos los links
***/
autoFade = true;
/*
** poner true o false, true da fade
** a todas las clases CSS
***/
sloppyClass = true;
/**
**** </config>
**************/

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

document.onmouseover = domouseover;
document.onmouseout = domouseout;

startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());

var fadeId = new Array();

function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i<7; i++){
for (j=0; j<16; j++){
if (Color.charAt(i) == hexa[j]){
if (i%2 !=0)
colorArr[Math.floor((i-1)/2)]=eval(j)*16;
else
colorArr[Math.floor((i-1)/2)]+=eval(j);
}
}
}
return colorArr;
}

function domouseover() {
if(document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
fade(startColor,endColor,srcElement.uniqueID,stepIn);
}
}

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

- Imagen que se desvanece
- Efecto de transición FadeIn en imágenes con JavaScript
- Cómo publicar una dirección de correo sin recibir 1000 mensajes de Spam
- Página de inicio y favoritos
- Modificar elementos HTML con JavaScript

- Versión imprimible de este documento

- Enviar por e-mail este documento