Fading Rollover

	2.8/5.0 (262 votes total)
	Rate: Select 1 - Terrible 2 - Poor 3 - Average 4 - Good 5 - Outstanding

Description:

Uses OnMouseOver and OnMouseOut events with a series of images to create a fade effect. Recently re-written to be more efficient and cross-browser compatible with Netscape and Internet Explorer. Stunning!

JavaScript Functions:
<SCRIPT LANGUAGE="JavaScript"> <!-- Begin hexColor = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]; function mOver() { for (i = 0; i < 13; i++) { setTimeout('document.myForm.button.style.background = "#'+hexColor[12-i]+'0'+hexColor[12-i]+'0c0";', i * 40); } } function mOut() { document.myForm.button.value = " Click Me! "; for (i = 0; i < 12; i++) { setTimeout('document.myForm.button.style.background = "#'+hexColor[i]+'0'+hexColor[i]+'0c0";', i * 40); } } // End --> </script>

HTML Script:
<form name=myForm> <input type=button name=button value=" Click Me! " onMouseOver='mOver()'' onMouseDown='document.myForm.button.value="Thank You!"' onMouseOut='mOut()'> </form>