JavaScript

Fading Rollover
 

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>

—
more Scripts: Alerts, Forms, Text, Buttons, Games, User Information, Calendars, Miscellaneous, Utilities,
Clocks, Navigation, Windows, Cookies, Page Information, Special Effects, Counters, Passwords, DHTML



[Home] [Templates] [Blog] [Forum] [Directory] JavaScript - Fading Rollover