topical media & game development

topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _
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 -->
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _
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.