DHTML Form Elements Animation Script

The DHTML Form Elements Animation Script
This eye catching DHTML form elements animation script applies a very smooth fade coloring animation to the form element in focus. You may choose among 5 different form animation coloring effects. Surprising way to get your visitors to fill out the forms on your site!

Copy and paste installation
Internet Explorer 5 or higher. Test the script by clicking on any form elements below:

Test the DHTML form elements animation script below
Click on the form button, or the form field input boxes for a smooth DHTML form elements animation fade effect demonstration. The form elements animation effect will get your visitors attention instantly!

Test the highlight-animation on this form element. Test the highlight-animation on this form element. Test the highlight-animation on this form element.

Configuration

Step 1: Open your web page. Paste the following code between the <head> and </head> tags of your web page:

<SCRIPT> // CREDITS: // Animate your form elements // by Urs Dudli and Peter Gehrig // Copyright (c) 2001 Peter Gehrig and Urs Dudli. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://www.24fun.com & http://www.designerwiz.com // info@24fun.com // 10/24/2001 // IMPORTANT: // If you add this script to a script-library or a script-archive // you are required to insert a highly visible link to http://www.24fun.com // right into the webpage where the script // will be displayed. /////////////////////////////////////////////////////////////////////////// // CONFIGURATION STARTS HERE /////////////////////////////////////////////////////////////////////////// // Choose a coloring effect by configuering the variable fade-effect below: // Set 1 if the background should fade from dark to medium and back to dark // Set 2 if the background should fade from light to medium and back to light // Set 3 if the background should fade from light to dark and back to light // Set 4 if the background should fade from light to very light and back to light // Set 5 if the background should fade from dark to very dark and back to dark var fade_effect=4 /////////////////////////////////////////////////////////////////////////// // CONFIGURATION ENDS HERE /////////////////////////////////////////////////////////////////////////// var eventobj=false var timer var previouscolor var ns6=document.getElementById&&!document.all if (fade_effect==1) { var darkmax=1 var lightmax=127 } if (fade_effect==2) { var darkmax=127 var lightmax=254 } if (fade_effect==3) { var darkmax=1 var lightmax=254 } if (fade_effect==4) { var darkmax=180 var lightmax=254 } if (fade_effect==5) { var darkmax=1 var lightmax=80 } var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F') var redrgb=lightmax var greenrgb=lightmax var bluergb=lightmax var redcol_1 var redcol_2 var greencol_1 var greencol_2 var bluecol_1 var bluecol_2 var stepmax=15 var stepred=Math.ceil(stepmax*Math.random()) var stepgreen=Math.ceil(stepmax*Math.random()) var stepblue=Math.ceil(stepmax*Math.random()) function setrandomstep() { stepred=Math.ceil(stepmax*Math.random()) stepgreen=Math.ceil(stepmax*Math.random()) stepblue=Math.ceil(stepmax*Math.random()) } function makedarker() { redrgb-=stepred greenrgb-=stepgreen bluergb-=stepblue if (redrgb<darkmax) {redrgb=darkmax} if (greenrgb<darkmax) {greenrgb=darkmax} if (bluergb<darkmax) {bluergb=darkmax} if (redrgb>darkmax || greenrgb>darkmax || bluergb>darkmax) { redcol_1 = hexc[Math.floor(redrgb/16)]; redcol_2 = hexc[redrgb%16]; greencol_1 = hexc[Math.floor(greenrgb/16)]; greencol_2 = hexc[greenrgb%16]; bluecol_1 = hexc[Math.floor(bluergb/16)]; bluecol_2 = hexc[bluergb%16]; var backcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2 eventobj.style.backgroundColor=backcolor timer=setTimeout("makedarker()",20); } else { clearTimeout(timer) setrandomstep() setTimeout("makelighter()",20) } } function makelighter() { redrgb+=stepred greenrgb+=stepgreen bluergb+=stepblue if (redrgb>=lightmax) {redrgb=lightmax} if (greenrgb>=lightmax) {greenrgb=lightmax} if (bluergb>=lightmax) {bluergb=lightmax} if (redrgb<lightmax || greenrgb<lightmax || bluergb<lightmax) { redcol_1 = hexc[Math.floor(redrgb/16)]; redcol_2 = hexc[redrgb%16]; greencol_1 = hexc[Math.floor(greenrgb/16)]; greencol_2 = hexc[greenrgb%16]; bluecol_1 = hexc[Math.floor(bluergb/16)]; bluecol_2 = hexc[bluergb%16]; var backcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2 eventobj.style.backgroundColor=backcolor timer=setTimeout("makelighter()",20); } else { clearTimeout(timer) setrandomstep() setTimeout("makedarker()",20) } } function animate(e) { if (document.all) { if (eventobj) { eventobj.style.backgroundColor=previouscolor } clearTimeout(timer) eventobj= event.srcElement previouscolor= eventobj.style.backgroundColor makedarker() } } function stopit() { if (document.all) { clearTimeout(timer) eventobj.style.backgroundColor=previouscolor } } </script>

Step 2: Paste the following red code into any form element (sample button):
<input type="button" onFocus="animate(event)" onBlur="stopit()" value="submit">

Step 3: Open your web page. Go to the top of the script-code and choose a coloring-effect by setting the variable fade_effect.

Click here and download 500 free copy-and-paste scripts!