graphic-javascript-effect-background-fader-effect.htm / htm
<!-- THREE STEPS TO INSTALL FADER:
1. Copy the coding into the HEAD of your HTML document
2. Add the id property into the BODY tag
3. Put the last coding into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<script type="text/javascript">
<!-- Begin
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Tony Tschopp :: http://www.goodturnwebdesign.com */
/* comp = name (ID="comp") of the HTML page component to fade
cbeg = start value for color in #rrggbb format
cend = end value for color in #rrggbb format
iter = number of steps in the fade from start color to end color
time = number of milliseconds to display each step
rbeg = start value for red component of rbg color
gbeg = start value for green component of rbg color
bbeg = start value for blue component of rbg color
rend = end value for red component of rbg color
gend = end value for green component of rbg color
bend = end value for blue component of rbg color */
var hstr = '#';
var hdig = "0123456789abcdef";
function mOvr(comp, cbeg, cend, iter, time) {
var rbeg = hdig.indexOf(cbeg.substr(1,1))*16 + hdig.indexOf(cbeg.substr(2,1));
var gbeg = hdig.indexOf(cbeg.substr(3,1))*16 + hdig.indexOf(cbeg.substr(4,1));
var bbeg = hdig.indexOf(cbeg.substr(5,1))*16 + hdig.indexOf(cbeg.substr(6,1));
var rend = hdig.indexOf(cend.substr(1,1))*16 + hdig.indexOf(cend.substr(2,1));
var gend = hdig.indexOf(cend.substr(3,1))*16 + hdig.indexOf(cend.substr(4,1));
var bend = hdig.indexOf(cend.substr(5,1))*16 + hdig.indexOf(cend.substr(6,1));
for ( i = 1, r = rbeg, g = gbeg, b = bbeg;
i <= iter;
r = Math.round(rbeg + i * ((rend - rbeg) / (iter-1))),
g = Math.round(gbeg + i * ((gend - gbeg) / (iter-1))),
b = Math.round(bbeg + i * ((bend - bbeg) / (iter-1))), i++ ) {
hstr = '#' + hdig.charAt(Math.floor(r/16)) + hdig.charAt(r%16) +
hdig.charAt(Math.floor(g/16)) + hdig.charAt(g%16) +
hdig.charAt(Math.floor(b/16)) + hdig.charAt(b%16);
setTimeout('var el = document.getElementById("' + comp + '"); el.style.backgroundColor = "' + hstr + '";', i * time);
}
}
function mOut(comp, cbeg, cend, iter, time) {
var rbeg = hdig.indexOf(cbeg.substr(1,1))*16 + hdig.indexOf(cbeg.substr(2,1));
var gbeg = hdig.indexOf(cbeg.substr(3,1))*16 + hdig.indexOf(cbeg.substr(4,1));
var bbeg = hdig.indexOf(cbeg.substr(5,1))*16 + hdig.indexOf(cbeg.substr(6,1));
var rend = hdig.indexOf(cend.substr(1,1))*16 + hdig.indexOf(cend.substr(2,1));
var gend = hdig.indexOf(cend.substr(3,1))*16 + hdig.indexOf(cend.substr(4,1));
var bend = hdig.indexOf(cend.substr(5,1))*16 + hdig.indexOf(cend.substr(6,1));
for ( i = 1, r = rend, g = gend, b = bend;
i <= iter;
r = Math.round(rend - i * ((rend - rbeg) / (iter-1))),
g = Math.round(gend - i * ((gend - gbeg) / (iter-1))),
b = Math.round(bend - i * ((bend - bbeg) / (iter-1))), i++ ) {
hstr = '#' + hdig.charAt(Math.floor(r/16)) + hdig.charAt(r%16) +
hdig.charAt(Math.floor(g/16)) + hdig.charAt(g%16) +
hdig.charAt(Math.floor(b/16)) + hdig.charAt(b%16);
setTimeout('var el = document.getElementById("' + comp + '"); el.style.backgroundColor = "' + hstr + '";', i * time);
}
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Insert the id property into your BODY tag -->
<BODY id="myPage">
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<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>
<!-- Script Size: 4.76 KB -->
(C) Æliens 20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.
