Web Hosting, Free Web Site Builder & Domain Name, Web Hosting Made Easy By Brinkster

Fading Color Links

Added By: spanglerco

Rated:

(3 of 5) by 8.

Rate Snippet: 12345

Description:

Links fade from one color to another on mouse over. Paul Spangler SpanglerCo www.spanglerco.tk

Language: JavaScript

Save to web space
E-mail Link

Code Snippet:

Change the startColor and endColor to determine the colors to fade to/from. The stepIn
controls the speed of the fade in and fadeOut determines the speed of the fade out.
autoFade means that all links fade. If autoFade is false, links must be the "fade" class.

-------------------------------------------------------Start of Code---------------------------------------------------------------------------------------------------------------
startColor = "#CCFF00";
endColor = "#006666";
stepIn = 25;
stepOut = 25;
autoFade = true;  
/*
** set to true or false; true will cause all CSS
** classes with "fade" in them to fade onmouseover
***/
sloppyClass = false; 
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 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);      
   }
}

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

function makearray(n) {
    this.length = n;
    for(var i = 1; i <= n; i++)
        this[i] = 0;
    return this;
}

function hex(i) {
    if (i < 0)
        return "00";
    else if (i > 255)
        return "ff";
    else
       return "" + hexa[Math.floor(i/16)] + hexa[i%16];}

function setColor(r, g, b, element) {
      var hr = hex(r); var hg = hex(g); var hb = hex(b);
      element.style.color = "#"+hr+hg+hb;
}

Paul Spangler
                                                                       SpanglerCo
                                                                   www.spanglerco.tk