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

- Enlace a la pagina anterior
- Funciones en Javascript
- Iluminación Gradual de Imágenes
- Detectar el final de una descarga
- Obligar a rellenar los campos en JavaScript

- Versión imprimible de este documento

- Enviar por e-mail este documento