Flying By Cyrcle Menu - JavaScript Made Easy

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Flying By Cyrcle Menu		[View Sample]

This menu consists of links flying by the cyrcle. While moving cursor over link description appears in the center


Insert into <HEAD>
<style type="text/css"> .circle, .text { font: 12px Verdana, Arial, sans-serif; color: blue; position: absolute; } .circle { z-index: 2 } .circle img {border: 0 } .text { text-align: left; top: 180px; left:140px; width: 225px; z-index: 0; visibility: hidden; } </style> <script type="text/javascript"> var r = 150; // radius var xoff = 200; // horizontal position var yoff = 200; // vertical position var inc = Math.PI / 360; // the higher the number the slower the speed of rotation var objects; var pos; function ge(id) {return document.getElementById(id)} function show(id) {ge(id).style.visibility = 'visible'} function hide(id) {ge(id).style.visibility = 'hidden'} function rotateObjs() { for (var i = 0; i < pos.length; i++) { pos[i] += inc; objects[i].style.left = (r * Math.cos(pos[i])) + xoff objects[i].style.top = (r * Math.sin(pos[i])) + yoff; } setTimeout("rotateObjs()", 37); } function startMenu() { objects = [ge('circle1'), ge('circle2'), ge('circle3'), ge('circle4'), ge('circle5'), ge('circle6')]; pos = new Array(); pos[0] = 0; for (var i = 1; i < objects.length; i++) { pos[i] = parseFloat(pos[i - 1] + ((2 * Math.PI) / objects.length)); } rotateObjs(); } </script>

Insert into <BODY>
<body onload="startMenu()";> <div id="circle1" class="circle"><a href="#" onmouseover="show('text1')" onmouseout="hide('text1')"><img src="links.gif" width="110" height="34"></a></div> <div id="circle2" class="circle"><a href="#" onmouseover="show('text2')" onmouseout="hide('text2')"><img src="links.gif" width="110" height="34"></a></div> <div id="circle3" class="circle"><a href="#" onmouseover="show('text3')" onmouseout="hide('text3')"><img src="links.gif" width="110" height="34"></a></div> <div id="circle4" class="circle"><a href="#" onmouseover="show('text4')" onmouseout="hide('text4')"><img src="links.gif" width="110" height="34"></a></div> <div id="circle5" class="circle"><a href="#" onmouseover="show('text5')" onmouseout="hide('text5')"><img src="links.gif" width="110" height="34"></a></div> <div id="circle6" class="circle"><a href="#" onmouseover="show('text6')" onmouseout="hide('text6')"><img src="links.gif" width="110" height="34"></a></div> <div id="text1" class="text"> <p align=center><b>Your Site Name</b><br><br> Link #1 description<br>goes here </div> <div id="text2" class="text"> <p align=center><b>Your Site Name</b><br><br> Link #2 description<br>goes here </div> <div id="text3" class="text"> <p align=center><b>Your Site Name</b><br><br> Link #3 description<br>goes here </div> <div id="text4" class="text"> <p align=center><b>Your Site Name</b><br><br> Link #4 description<br>goes here </div> <div id="text5" class="text"> <p align=center><b>Your Site Name</b><br><br> Link #5 description<br>goes here </div> <div id="text6" class="text"> <p align=center><b>Your Site Name</b><br><br> Link #6 description<br>goes here </div>

Other Options