»
EnglishFrenchVietnamese

Print - Fading Links - JavaScriptBank.com

Full version: jsB@nk » Link » Rainbow » Fading Links
URL: http://www.javascriptbank.com/fading-links.html

Fading Links © JavaScriptBank.comThis JavaScript will gradually fade the text for any JavaScript link you choose from one color to another. Just set a number of parameters in the JavaScript link HTML tag and the script will do the rest. Simply omit the parameters for links which you want to keep the default look. This effect only works in IE5+, Netscape6+, and Mozilla 1+, but does not cause errors in older browsers.

Full version: jsB@nk » Link » Rainbow » Fading Links
URL: http://www.javascriptbank.com/fading-links.html



CSS
<style type="text/css">body{background-color:white;font-size:10pt;font-style:sans-serif;color:black;font-family:verdana;font-size:10pt; padding-left:50; padding-right:50; padding-top:10; padding-bottom:0}a{font-weight:bold;text-decoration:none;font-family:verdana;font-size:10pt;color:blue;}.code{font:9pt courier;color:maroon;}.tcell{font:bold 9pt verdana;}</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<table cellpadding=10 cellspacing=10 border=0><tr valign="top"><td bgcolor="black" width="50%"><a href="#0" parameters="#FF0000~#0000FF~300~300">Example Link 1</a><br><br><a href="#0" parameters="#00AA00~#FF00FF~600~600">Example Link 2</a><br><br><a href="#0" parameters="#0000FF~#FF0000~200~600">Example Link 3</a></td><td bgcolor="lightgrey" width="50%"><a href="#0" parameters="#000000~#FFFFFF~350~500">Example Link 4</a><br><br><a href="#0" parameters="#FF000F~#000000~100~100">Example Link 5</a><br><br><a href="#0">Normal Link (no effects)</a></td></tr></table><script language="javascript" title="linkfader.js">// LINK FADER SCRIPT V1.0// By: Brian Gosselinvar cID=0;var currL=null;var cntr=0;var sCol=new Array();var eCol=new Array();var cSteps=new Array();var itStep=15;function cSet(hexn){var el=new Array();for(i=1,n=0;i<7;i+=2,n++)el[n]=parseInt('0x'+hexn.substring(i,i+2));return el;}function calcSteps(el){for(i=0;i<3;i++)cSteps[i]=Math.round((eCol[i]-sCol[i])/itStep);}function getHex(n){return Math.max(Math.min(sCol[n]+cSteps[n]*cntr,255),0).toString(16);}function fadeLink(isH){if(cntr<itStep){var R=getHex(0);var G=getHex(1);var B=getHex(2);if(R.length==1)R='0'+R;if(G.length==1)G='0'+G;if(B.length==1)B='0'+B;currL.style.color=('#'+R+G+B);cntr++;}else{clearInterval(cID);if(isH)currL.style.color=currL.EC;else currL.style.color=currL.SC;}}function linkH(){if(currL!=null)currL.style.color=currL.SC;clearInterval(cID);cntr=1;sCol=new cSet(this.SC);eCol=new cSet(this.EC);calcSteps();cID=setInterval('fadeLink(true)',this.FSH);currL=this;if(typeof this.omv=="function")this.omv();return true;}function linkO(){clearInterval(cID);cntr=1;sCol=new cSet(this.EC);eCol=new cSet(this.SC);calcSteps();cID=setInterval('fadeLink(false)',this.FSO);if(typeof this.omt=="function")this.omt();currL=this;}function fadeW3CElements(which){if(document.getElementsByTagName){var el=document.getElementsByTagName(which);var pms=new Array();for(i=0;i<el.length;i++){if(el[i].getAttribute('parameters')){pms=el[i].getAttribute('parameters').split('~');if(pms.length==4){el[i].SC=pms[0].substr(pms[0].indexOf('#'),7);el[i].EC=pms[1].substr(pms[1].indexOf('#'),7);el[i].FSH=Math.ceil(Math.max(20,parseInt(pms[2]))/itStep);el[i].FSO=Math.ceil(Math.max(20,parseInt(pms[3]))/itStep);el[i].style.color=el[i].SC;el[i].omv=el[i].onmouseover;el[i].onmouseover=linkH;el[i].omt=el[i].onmouseout;el[i].onmouseout=linkO;}}}}}fadeW3CElements('A');</script><script language="javascript">fadeW3CElements('span');</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->