The JavaScript Source: Image Effects: Fader

Click here

Home

Image Effects

Fader

This script demonstrates several techniques for fading the background of selected HTML components such as buttons, text boxes, and page backgrounds, from one color to another.

Text Box

Free JavaScripts provided by
The JavaScript Source

The JavaScript Source: Image Effects: Fader
Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

  <HEAD> <script type="text/javascript">  </script> </HEAD>  <BODY id="myPage">  <form id="myForm" name="myForm" style="border: 3px dashed blue; width: 250px"> <div align="center"> <br> <input type=button id="button1" style="background: #cc9933" value="Fade this button" onMouseOver="mOvr('button1','#cc9933','#6699cc',10,100)" onMouseOut="mOut('button1','#cc9933','#6699cc',10,100)" onMouseDown="document.myForm.button1.value='Thank You!'"> <br> <input type=button id="button2" value="Fade the text box" onMouseOver="mOvr('myText','#996633','#cccc99',10,40)" onMouseOut="mOut('myText','#996633','#cccc99',10,40)" onMouseDown="document.myForm.button2.value='Gracias!'"> <br> <input type=button id="button3" value="Fade this page" onMouseOver="mOvr('myPage','#ffffff','#758642',10,100)" onMouseOut="mOut('myPage','#ffffff','#758642',10,100)" onMouseDown="document.myForm.button3.value='Merci!'"> <br> </div> </form> <div align="center" id="myText" style="border: 3px solid #c0c0c0; display: block; width: 250; background-color: #996633; padding: 4px;"> Text Box<br><br>Free JavaScripts provided by<br> The JavaScript Source </div> <p><center> <font face="arial, helvetica" size"-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </center><p> 
Did you use this script? Do you like this site? Please link to us!

Add a comment, suggestion, or correction

Click here

Sign up for the Web Development Daily Newsletter

internet.com Privacy Policy

[ Contact Us! ]
[ JavaScript Forum ]
[ Submit Your Script! ]

Click here