Kolorowe tło za elementami nawigacji
Sekvja HEAD:
| <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> |
Sekcja BODY:
| <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> |