Metachecker.net
|
FontsMadeEasy.com
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
Flying Links
[View Sample]
These animated links are a good choice for title page. Just see the example
Insert into <HEAD>
Insert into <BODY>
<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> <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(url) { if (window.name == "") { top.location.href = url; } else { top.opener.top.location.href = url; top.close(); } } //--> </SCRIPT> </head> <body bgcolor="#ffe4c4" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000"> <div id = "fly1" class = "fly"> <a href = "contents.htm" onMouseOver = "showObject(desc1)" onMouseOut = "hideObject(desc1)">Introduction</a><br> </div> <div id = "fly2" class = "fly"> <a href = "navigationaids.htm" onMouseOver = "showObject(desc2)" onMouseOut = "hideObject(desc2)">Navigation Aids</a><br> </div> <div id = "fly3" class = "fly"> <a href = "coloursandgraphics.htm" onMouseOver = "showObject(desc3)" onMouseOut = "hideObject(desc3)">Colours and Graphics</a><br> </div> <div id = "fly4" class = "fly"> <a href = "funstuff.htm" onMouseOver = "showObject(desc4)" onMouseOut = "hideObject(desc4)">Fun Stuff</a><br> </div> <div id = "company" class = "logo">JavaScript Resources</div> <div id = "desc1" class = "desc"> Introduction and links </div> <div id = "desc2" class = "desc"> Aids to Web site navigation </div> <div id = "desc3" class = "desc"> Playing with colours and images </div> <div id = "desc4" class = "desc"> Games, quizzes, etc. </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('fly.htm');"> </form> </layer></div>
Other Options