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