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) _

talk show tell print

graphic-javascript-effect-tag-move-effect.htm / htm



  
  <!-- TWO STEPS TO INSTALL TAG MOVER:
  
    1.  Copy the coding into the HEAD of your HTML document
  
    2.  Add the last code into the BODY of your HTML document  -->
  
  <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
  
  <HEAD>
  
  <!-- This script and many more are available free online at -->
  
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- Original:  Russell Kaufman-Pace (russ_man7@hotmail.com) -->
  
  <style type="text/css">
  
  #home_tag {width: 200; height: 50; border-width: 1; border-color: black; border-style: solid; z-index: 10}
  
  #home_label {width: 200; height: 50; position: absolute; top: 110; left: 200; z-index: 9}
  
  #chiefs_tag {width: 200; height: 50; border-width: 1; border-color: black; border-style: solid; z-index: 12}
  
  #chiefs_label {width: 200; height: 50; position: absolute; top: 110; left: 200; z-index: 11}
  
  #members_tag {width: 200; height: 50; border-width: 1; border-color: black; border-style: solid; z-index: 14}
  
  #members_label {width: 200; height: 50; position: absolute; top: 110; left: 300; z-index: 13}
  
  #pictures_tag {width: 200; height: 50; border-width: 1; border-color: black; border-style: solid; z-index: 16}
  
  #pictures_label {width: 200; height: 50; position: absolute; top: 110; left: 400; z-index: 15}
  
  #links_tag {width: 200; height: 50; border-width: 1; border-color: black; border-style: solid; z-index: 18}
  
  #links_label {width: 200; height: 50; position: absolute; top: 110; left: 500; z-index: 17}
  
  </style>
  
  <script language="JavaScript">
  
  <!-- 
  
  var where_to;
  
  var the_timeout;
  
  function moveIt()
  
          {
  
          if (background_tag.style.left<where_to)
  
                  {
  
                  background_tag.style.left=parseInt(background_tag.style.left) + 10;
  
                  }
  
          if (background_tag.style.left>where_to)
  
                  {
  
                  background_tag.style.left=parseInt(background_tag.style.left) - 10;
  
                  }
  
          the_timeout = setTimeout('moveIt()', 10);
  
          }
  
  function getOverIt(the_tag)
  
          {
  
          clearTimeout(the_timeout);
  
          moveIt();
  
          where_to=the_tag.style.left;
  
          }
  
  -->
  
  </script>
  
  </HEAD>
  
  <!-- STEP TWO: Copy this code into the BODY of your HTML document  -->
  
  <BODY>
  
  <!-- This script and many more are available free online at -->
  
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- Original:  Russell Kaufman-Pace (russ_man7@hotmail.com) -->
  
  <div id="background_tag" style="background: green; width: 200; height: 50; position: absolute; top: 110; left: 200; z-index: 8"></div>
  
  <div id="home_tag" onMouseOver="getOverIt(home_tag);" style="position: absolute; top: 110; left: 200"></div>
  
  <div id="chiefs_tag" onMouseOver="getOverIt(chiefs_tag);" style="position: absolute; top: 110; left: 200"></div>
  
  <div id="members_tag" onMouseOver="getOverIt(members_tag);" style="position: absolute; top: 110; left: 300"></div>
  
  <div id="pictures_tag" onMouseOver="getOverIt(pictures_tag);" style="position: absolute; top: 110; left: 400"></div>
  
  <div id="links_tag" onMouseOver="getOverIt(links_tag);" style="position: absolute; top: 110; left: 500"></div>
  
  <div align="center" id="home_label"><a href="http://javascriptsource.com">Home</a></div>
  
  <div align="center" id="chiefs_label"><a href="http://javascripts.com">More Free Scripts</a></div>
  
  <div align="center" id="members_label"><a href="http://javascript.com">JavaScript.com</a></div>
  
  <div align="center" id="pictures_label"><a href="http://theguestbook.com">Free Guestbook</a></div>
  
  <div align="center" id="links_label"><a href="http://thecounter.com">Free Site Counter</a></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:  3.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) _

(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.