« »

Implement this JavaScript into your web pages to make all links change color by themself on mouse over event. Colors defined by an array with hexadecimal value, clrArray, you can change and add colors easily. All you need to do is cope all JavaScript code and paste into your web pages, you should save them into a file for using this effect on many pages.

Label: Rainbow link on mouseOver

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
Print

Copy All x2

<script language=javascript>
/*
		    xxxxxxxxxxxxxxx   xxxxxxxxxxx     xxxx
		    xxxxxxxxxxxxxxx  xxxxxxxxxxxxx    xxxx
		    xxxxxxxxxxxxxxx  xxxxxxxxxxxxx    xxxx
		         xxxxx       xxxxxxxxxxxx     xxxx
		         xxxxx       xxxxx			  xxxx
		         xxxxx		 xxxxxxxxxxxx	  xxxx
		         xxxxx		 xxxxxxxxxxxxx	  xxxxxxxxxxx			www.JavaScriptBank.com
		         xxxxx		  xxxxxxxxxxxx	  xxxxxxxxxxxxx
		         xxxxx       		 xxxxx	  xxxx     xxxx
		   xxx   xxxxx		  xxxxxxxxxxxx    xxxx     xxxx
		   xxx  xxxxxx		 xxxxxxxxxxxxx	  xxxx     xxxx
		   xxxxxxxxxx		 xxxxxxxxxxxxx	  xxxxxxxxxxxxx
		    xxxxxxxx		  xxxxxxxxxxx      xxxxxxxxxxx
		    
		    
	Rainbow link on mouseOver
	Author: ThÃ¡i Cao Phong
	Website: www.JavaScriptBank.com
	Please keep these comments above to contact author when you use this script. Thank you very much.
	Vietnamese: Xin ban hay giu lai nhung thong tin tren de nguoi khac co the lien he voi tac gia neu ban co 
su dung doan ma nay. Cam on ban rat nhieu.
*/
var timerID,
	srcElemActive,
	count = 0,
	oldColor;
var clrArray = new Array(
							'D0CBFE', '8C80FD', '5543FC', '1B04E3', // blue
							'E7FFE6', 'B7FFB3', '80FF79', '0AC400', // green
							'FFD6D5', 'FF9693', 'FF3D37', 'EA0600' // red
						);

var ie = navigator.appName=='Microsoft Internet Explorer'?true:false,
	op = window.opera?true:false,
	ns = navigator.vendor?true:false;


function ChangeColor()
{
	if(srcElemActive) srcElemActive.style.color = '#' + clrArray[count++];
	if(count == (clrArray.length - 1)) count = 0;
}
///////////////////////////////////////////////////////////////////////////////
// makeRainbow function
///////////////////////////////////////////////////////////////////////////////
function makeRainbow(evt)
{
	if(op) return;
	var srcElem = getObject(evt);
	var temp = "";
	if(srcElem.tagName == "A" && srcElem.href != '')
	{
		srcElemActive = srcElem;
		oldColor = srcElem.style.color;
		timerID = setInterval("ChangeColor()", 200);
	}
	return true;
}

///////////////////////////////////////////////////////////////////////////////
// stopRainbow function
///////////////////////////////////////////////////////////////////////////////
function stopRainbow(evt)
{
	var srcElem = getObject(evt);
	if(op && srcElem.className != 'rate_item') return;
	if(srcElemActive && srcElem.tagName == "A" && srcElem.href != '')
	{
		srcElemActive = null;
		srcElem.style.color = oldColor;
		clearInterval(timerID);
	}
}

///////////////////////////////////////////////////////////////////////////////
// getObject function
///////////////////////////////////////////////////////////////////////////////
function getObject(evt)
{
	var srcElem;
	if(ie)
	{
		srcElem = event.srcElement;
	}
	else
	{
		srcElem = evt.target;
	}
	return srcElem;
}
document.onmouseover = makeRainbow;
document.onmouseout = stopRainbow;

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