« »

The code makes all the JavaScript link on the web page change color continually.

Label: Link Color Cycle

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<SCRIPT type=text/javascript>
/***********************************************
*
* Function    : getColor
*
* Parameters  :	start - the start color (in the form "RRGGBB" e.g. "FF00AC")
*			end - the end color (in the form "RRGGBB" e.g. "FF00AC")
*			percent - the percent (0-100) of the fade between start & end
*
* returns	  : color in the form "#RRGGBB" e.g. "#FA13CE"
*
* Description : This is a utility function. Given a start and end color and
*		    a percentage fade it returns a color in between the 2 colors
*
*************************************************/
function getColor(start, end, percent){
	function hex2dec(hex){return(parseInt(hex,16));}
	function dec2hex(dec){return (dec < 16 ? "0" : "") + dec.toString(16);}
	var r1 = hex2dec(start.slice(0,2)), g1=hex2dec(start.slice(2,4)), b1=hex2dec(start.slice(4,6));
	var r2 = hex2dec(end.slice(0,2)),   g2=hex2dec(end.slice(2,4)),   b2=hex2dec(end.slice(4,6));
	var pc = percent/100;
	var r  = Math.floor(r1+(pc*(r2-r1)) + .5), g=Math.floor(g1+(pc*(g2-g1)) + .5), b=Math.floor(b1+(pc*(b2-b1)) + .5);
	return("#" + dec2hex(r) + dec2hex(g) + dec2hex(b));
}
/************************************************/
</SCRIPT>

<SCRIPT>
function cycleColor(theClass, start, end, index, speed)
{
	if(index == 0)
	{
		start = end;
		end   = (end+1)%allColors[theClass].length;
	}
	var color = getColor(allColors[theClass][start], allColors[theClass][end], index);
	for(var i=0 ; i<document.links.length ; i++)
		if(document.links[i].className == theClass)
			document.links[i].style.color = color;
	index = (index+speed) % 100;

	setTimeout("cycleColor(\""+theClass+"\","+start+","+end+","+index+","+speed+")", 40);
}

var allColors = new Array();
allColors["c1"] = new Array("00FF00", "FFFF00", "00FFFF");
allColors["c2"] = new Array("00FF00", "FFFF00", "00FFFF");
function JSFX_StartEffects()
{
	cycleColor("c1", 0, 0, 0,  5);
	cycleColor("c2", 0, 0, 0, 10);
}

</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<TABLE width=600 align=center>
  <TBODY>
  <TR>
    <TD>
      <P><IMG src="../image/logojs.gif" align=left>Well, if 
		you visit this site and rely on this page for updates then you probably 
		leave without seeing all the new good stuff. The site has been updated 
		but this news section tends to get overlooked. You should always check 
		out the <A 
      href="http://JavaScriptBank.com">ScriptClips</A> 
      section and the <A class=c2 
      href="http://JavaScriptBank.com">In Development</A> section for updates. 
		So what&#39;s new? Well, in the <A 
      class=c1 
      href="http://JavaScriptBank.com">SlideShows</A> 
      section there are 2 new slideshows.<A class=c1 
      href="http://JavaScriptBank.com">Simple Slide Show</A> that allows <A class=c1 
      href="http://JavaScriptBank.com">multiple versions</A> of the same script 
		to be included on the same page. The script looks a lot better in IE as 
		it uses the transition filters to provide multimedia transitions between 
		slides.The <A class=c1 
      href="http://JavaScriptBank.com">Clickable Slideshow</A> is an extension 
		of the Simple Slide Show and allows each picture to have a link 
		associated so you can navigate to a new page or open a larger version of 
		the picture. In the <A 
      href="http://JavaScriptBank.com">ScriptClips</A> 
      section there is <A 
      href="http://JavaScriptBank.com">Text Trans Rollovers</A> which again use 
		the Microsoft Transition filters to create dynamic rollovers. <A 
      href="http://JavaScriptBank.com">Stay In View </A>- which is an extension 
		to the <A 
      href="http://JavaScriptBank.com">floating DIV</A> script so that the DIV 
		only floats when it is about to be scrolled off screen. In the <A class=c2 
      href="http://JavaScriptBank.com">In Development</A> section there is work 
		on progress on a <A 
      href="http://JavaScriptBank.com">Popup Picture Viewer</A> that uses a 
		layer to center a picture in the browser even when the window is 
		resized. There has also been a little extra work done on the <A 
      href="http://JavaScriptBank.com">Left Slide Menu</A> with extra <A 
      href="http://JavaScriptBank.com">demos</A>.</P></TD></TR></TBODY></TABLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->