»
EnglishFrenchVietnamese

Print - Flying By Cyrcle Menu - JavaScriptBank.com

Full version: jsB@nk » Menu » Floatable » Flying By Cyrcle Menu
URL: http://www.javascriptbank.com/flying-by-cyrcle-menu.html

Flying By Cyrcle Menu © JavaScriptBank.comThis JavaScript menu consists of links flying by the cyrcle. While moving cursor over JavaScript link description appears in the center.

Full version: jsB@nk » Menu » Floatable » Flying By Cyrcle Menu
URL: http://www.javascriptbank.com/flying-by-cyrcle-menu.html



CSS
<style> .fly { font-family:    Arial, Helvetica; font-size:      large; color:          #0000ff; position:       absolute; visibility:     hidden; z-index:        2; }  .logo { font-family:   Zap-Chance,  cursive; font-size:      xx-large; color:          #ff0000; position:       absolute; top:            0px; left:           30px; visibility:     visible; z-index:        1; }  .desc { text-align:     center; font-family:    Arial, Helvetica; color:          #cc6699; position:       absolute; top:            220px; left:           40px; width:          400px; visibility:     hidden; z-index:        0; } </style> <!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script type="text/javascript" language="JavaScript">       /* Show an object */     function showObject(object) {         object.visibility = VISIBLE;     }      /* Hide an object */     function hideObject(object) {         object.visibility = HIDDEN;     }      /* Slide the company logo from top to middle */     function slideLogo(from, to) {             if (from < to) {                 company.top = (from += 10);                 setTimeout('slideLogo(' + from + ',' + to + ')', 75);             }             else initObjects();     }      /* Rotate selected objects */     function rotateObjects() {             for (var i = 0; i < pos.length; i++) {                 pos[i] += inc; objects[i].visibility = 'visible';                 objects[i].left = (r * Math.cos(pos[i])) + xoff                 objects[i].top = (r * Math.sin(pos[i])) + yoff;             }         rotateTimer = setTimeout("rotateObjects()", 75);     }       /* Initialize selected objects for rotation */      function initObjects() {         /* Here is the array of HTML elements that will be rotated, from fly1 to fly4             Just put the shortcut variables to the HTML elements in this little array            and they will be rotated automatically */         objects = new Array(fly1, fly2, fly3, fly4);         pos = new Array();         pos[0] = 0;             for (var i = 1; i < objects.length; i++) {                 pos[i] = parseFloat(pos[i - 1] + ((2 * pi) / objects.length));             }         rotateObjects();     }  /* Variables for rotating objects */     var objects;     var pos;     var r = 160;        // radius      var xoff = 180;     // x offset      var yoff = 170;     // y offset      var pi = Math.PI;   // get pi      var inc = pi / 180; // degrees per rotation cycle      var objects;        // objects to be rotated      var pos;            // position for objects   </script>   <SCRIPT LANGUAGE="JavaScript">  <!-- function exit() {    if (window.name == "") {      // top.location.href = url;    } else {               //top.opener.top.location.href = url;       top.close();    } } //-->   </SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<div id = "fly1" class = "fly"> <a href = "http://JavaScriptBank.com" onMouseOver = "showObject(desc1)" onMouseOut = "hideObject(desc1)">JavaScriptBank.com</a><br> </div> <div id = "fly2" class = "fly"> <a href = "http://JavaScriptBank.com" onMouseOver = "showObject(desc2)" onMouseOut = "hideObject(desc2)">JavaScriptBank.com</a><br> </div> <div id = "fly3" class = "fly"> <a href = "http://JavaScriptBank.com" onMouseOver = "showObject(desc3)" onMouseOut = "hideObject(desc3)">JavaScriptBank.com</a><br> </div> <div id = "fly4" class = "fly"> <a href = "http://JavaScriptBank.com" onMouseOver = "showObject(desc4)" onMouseOut = "hideObject(desc4)">JavaScriptBank.com</a><br> </div> <div id = "company" class = "logo">JavaScriptBank.com</div> <div id = "desc1" class = "desc"> Bank of over 2000+ free JavaScript</div> <div id = "desc2" class = "desc"> Bank of over 2000+ free JavaScript</div> <div id = "desc3" class = "desc"> Bank of over 2000+ free JavaScript</div> <div id = "desc4" class = "desc"> Bank of over 2000+ free JavaScript</div> <script type="text/javascript" language="JavaScript">      /* Simple version detection */     var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);   /* They can be used in place        of hidden and visible because on occasion Navigator has problems with the two */     var HIDDEN = (isNS) ? 'hide' : 'hidden';     var VISIBLE = (isNS) ? 'show' : 'visible';      /* Create shortcut variables for different absolutely positioned elements */     var fly1 = (isNS) ? document.fly1 : document.all.fly1.style;     var fly2 = (isNS) ? document.fly2 : document.all.fly2.style;     var fly3 = (isNS) ? document.fly3 : document.all.fly3.style;     var fly4 = (isNS) ? document.fly4 : document.all.fly4.style;     var company = (isNS) ? document.company : document.all.company.style;     var desc1 = (isNS) ? document.desc1 : document.all.desc1.style;     var desc2 = (isNS) ? document.desc2 : document.all.desc2.style;     var desc3 = (isNS) ? document.desc3 : document.all.desc3.style;     var desc4 = (isNS) ? document.desc4 : document.all.desc4.style;      /* Begin the sliding of the company logo */     slideLogo(0, 140); </script>  <div id="footer+text" style="position: absolute; left:200; top: 370"><layer name="footer+text" left=200 top=370><form> <input type=button value="Close Window" onClick="exit();"></form> </layer></div><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->