Animacja linków poprzez zaznaczanie pól wyboru.

HEAD:

BODY:
<SCRIPT>var sRepeat=null;function doScrollerIE(dir, src, amount) { if (amount==null) {amount=10} if (dir=="up") {document.all[src].scrollTop-=amount} else {document.all[src].scrollTop+=amount} if (sRepeat==null) {sRepeat = setInterval("doScrollerIE('" + dir + "','" + src + "'," + amount + ")",100)} return false}window.document.onmouseout = new Function("clearInterval(sRepeat);sRepeat=null");window.document.ondragstart = new Function("return false");function msover(){{event.srcElement.style.color="#000099";event.srcElement.style.backgroundColor="#3E7ED4";event.srcElement.style.cursor = "hand";}}function msout(){{event.srcElement.style.color="";event.srcElement.style.backgroundColor="";event.srcElement.style.cursor = "auto";}}function markover(){{event.srcElement.style.color="990000";event.srcElement.style.cursor = "hand";}}function markout(){{event.srcElement.style.color="000000";event.srcElement.style.cursor = "auto";}}function toggle( targetId ){{target = document.all( targetId );if (target.style.display == "none"){target.style.display = "";} else {target.style.display = "none";}}}</SCRIPT>

Animowane, mieniące sie kolorowo tło okna wyboru - "select".

HEAD:
<script langauge="javascript"> /* By: Aaron Connelly E-Mail: MAUWDIB@aol.com for non-comercial uses only - Other contact at the E-Mail address above This Credit Must stay intact for use!!!!!!!!!! */ //How fast the fadeing is going var speed=100 //The Font size var size=15 //Don't Edit var cf1="0" var cf2="0" function animate(){ var f1=new Array() f1[1]="0" f1[2]="15" f1[3]="35" f1[4]="55" f1[5]="95" f1[6]="100" f1[7]="130" f1[8]="140" f1[9]="190" f1[10]="230" f1[11]="240" f1[12]="256" f1[13]="240" f1[14]="220" f1[15]="190" f1[16]="120" f1[17]="90" f1[18]="70" f1[19]="30" f1[20]="10" f1[21]="0" var f2=new Array() f2[1]="0" f2[2]="15" f2[3]="35" f2[4]="55" f2[5]="75" f2[6]="95" f2[7]="100" cf1=(cf1==21)?1:++cf1 cf2=(cf2==7)?1:++cf2 /* **IMPORTANT** To Change the colors play with the 256 & 2 & 0 */ document.forms[0].menuBg.style.backgroundColor="rgb(256," + f1[cf1] + ",2)" document.forms[0].menuBg.style.color="rgb(0," + f2[cf2] + ",256)" document.forms[0].menuBg.style.fontWeight="bold" document.forms[0].menuBg.style.fontSize=size //Don't Edit setTimeout("animate()",speed) } window.onload=animate </script>

BODY:

HEAD:
<SCRIPT LANGUAGE="JavaScript"> <!-- // Copyright (c) 1996-1997 Tomer Shiran. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Courtesy of SimplytheBest.net (http://simplythebest.net/info/dhtml_scripts.html) var caution = false function setCookie(name, value, expires, path, domain, secure) { var curCookie = name + "=" + escape(value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : "") if (!caution || (name + "=" + escape(value)).length <= 4000) document.cookie = curCookie else if (confirm("Cookie exceeds 4KB and will be cut!")) document.cookie = curCookie } function getCookie(name) { var prefix = name + "=" var cookieStartIndex = document.cookie.indexOf(prefix) if (cookieStartIndex == -1) return null var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length) if (cookieEndIndex == -1) cookieEndIndex = document.cookie.length return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex)) } function deleteCookie(name, path, domain) { if (getCookie(name)) { document.cookie = name + "=" + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + "; expires=Thu, 01-Jan-70 00:00:01 GMT" } } function fixDate(date) { var base = new Date(0) var skew = base.getTime() if (skew > 0) date.setTime(date.getTime() - skew) } function item(parent, text, depth) { this.parent = parent this.text = text this.depth = depth } function makeArray(length) { this.length = length } function makeDatabase() { outline = new makeArray(15) outline[0] = new item(true, 'SimplytheBest.net', 0) outline[1] = new item(false, '<A HREF="http://simplythebest.net/shareware.html">Shareware & Freeware</A>', 1) outline[2] = new item(true, 'Scripts', 1) outline[3] = new item(false, '<A HREF="http://simplythebest.net/info/dhtml_scripts.html">DHTML Scripts</A>', 2) outline[4] = new item(false, '<A HREF="http://simplythebest.net/cgiscripts/cgiscripts.html">CGI Scripts</A>', 2) outline[5] = new item(false, '<A HREF="http://simplythebest.net/info/">Information library</A>', 1) outline[6] = new item(false, '<A HREF="http://simplythebest.net/drivers/drivers.html">Device drivers</A>', 1) outline[7] = new item(false, '<A HREF="http://simplythebest.net/fonts/">Free fonts</A>', 1) outline[8] = new item(false, '<A HREF="http://www.simplythebest.net/discussions/netboard.cgi">Discussion board</A>', 1) outline[9] = new item(true, 'PlanMagic.com', 0) outline[10] = new item(false, '<A HREF="http://planmagic.com">Product page</A>', 1) outline[11] = new item(false, '<A HREF="http://planmagic.com/business_plan.html">Business plan</A>', 1) outline[12] = new item(false, '<A HREF="http://planmagic.com/marketing_planning.html">Marketing plan</A>', 1) outline[13] = new item(false, '<A HREF="http://planmagic.com/finance.html">Financial plan</A>', 1) outline[14] = new item(false, '<A HREF="http://planmagic.com/webquest.html">Web marketing plan</A>', 1) setStates() setImages() } function setStates() { var storedValue = getCookie("outline") if (!storedValue) { for (var i = 0; i < outline.length; ++i) { if (outline[i].depth == 0) outline[i].state = true else outline[i].state = false } } else { for (var i = 0; i < outline.length; ++i) { if (storedValue.charAt(i) == '1') outline[i].state = true else outline[i].state = false } } } function setImages() { for (var i = 0; i < outline.length; ++i) { if (outline[i].state) if (outline[i].parent) if (outline[i + 1].state) outline[i].pic = '<A HREF="javascript:toggle(' + i + ')"><IMG SRC="dscript100/exploded.gif" BORDER=0></A>' else outline[i].pic = '<A HREF="javascript:toggle(' + i + ')"><IMG SRC="dscript100/collapsd.gif" BORDER=0></A>' else outline[i].pic = '<IMG SRC="dscript100/child.gif" BORDER=0>' } } function toggle(num) { for (var i = num + 1; i < outline.length && outline[i].depth >= outline[num].depth + 1; ++i) { if (outline[i].depth == outline[num].depth + 1) outline[i].state = !outline[i].state } setStorage() history.go(0) } function setStorage() { var text = "" for (var i = 0; i < outline.length; ++i) { text += (outline[i].state) ? "1" : "0" } setCookie("outline", text) } makeDatabase() // --> </SCRIPT>

BODY:
<SCRIPT LANGUAGE="JavaScript"> <!-- document.write('<PRE><font face=arial size=2>') for (var i = 0; i < outline.length; ++i) { if (outline[i].state) { for (var j = 0; j < outline[i].depth * 5; ++j) { document.write(' ') } document.write(outline[i].pic, ' ', outline[i].text, '<BR>') } else { var previous = i for (var k = i + 1; k < outline.length && outline[k].depth >= outline[previous].depth; ++k) { ++i } } } document.write('</font></PRE>') // --> </SCRIPT>

Menu na górze strony -schowanw po lewej stronie

HEAD:
<style> <!-- #slidemenubar, #slidemenubar2{ cursor:hand; position:absolute; left:-155px; width:160px; top:100px; border:1.5px solid green; background-color:lightyellow; layer-background-color:lightyellow; font:bold 12px Verdana; line-height:20px; } --> </style>

BODY:
<script language="JavaScript1.2"> /* Sliding Menu Bar Script- Š Dynamic Drive (www.dynamicdrive.com) For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com */ if (document.all) document.write('<div id="slidemenubar2" style="left:-150">') </script> <layer id="slidemenubar"> <script language="JavaScript1.2"> var sitems=new Array() var sitemlinks=new Array() //extend or shorten this list sitems[0]="Home" sitems[1]="Take our survey!" sitems[2]="Menus And Navigation" sitems[3]="Document Effects" sitems[4]="Scrollers" sitems[5]="Image Effects" sitems[6]="Links And Buttons" sitems[7]="Dynamic Clocks & Dates" sitems[8]="Text Animations" sitems[9]="Browser Window" sitems[10]="User System Information" sitems[11]="Cascading Style Sheets" sitems[12]="Other" //These are the links pertaining to the above text. sitemlinks[0]="../test.htm" sitemlinks[1]=".." sitemlinks[2]="../dynamicindex1/index.html" sitemlinks[3]="../dynamicindex3/index.html" sitemlinks[4]="../dynamicindex2/index.html" sitemlinks[5]="../dynamicindex4/index.html" sitemlinks[6]="../dynamicindex5/index.html" sitemlinks[7]="../dynamicindex6/index.html" sitemlinks[8]="../dynamicindex10/index.html" sitemlinks[9]="../dynamicindex8/index.html" sitemlinks[10]="../dynamicindex9/index.html" sitemlinks[11]="../dynamicindex7/index.html" sitemlinks[12]="../dynamicindex11/index.html" for (i=0;i<=sitems.length-1;i++) document.write('<a href='+sitemlinks[i]+'>'+sitems[i]+'</a><br>') </script> </layer> <script language="JavaScript1.2"> function regenerate(){ window.location.reload() } function regenerate2(){ if (document.layers) setTimeout("window.onresize=regenerate",400) } window.onload=regenerate2 if (document.all){ document.write('</div>') themenu=document.all.slidemenubar2.style rightboundary=0 leftboundary=-150 } else{ themenu=document.layers.slidemenubar rightboundary=150 leftboundary=10 } var dragapproved=false var x1,x2 if (document.layers) themenu.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP) function move(e){ if (document.all&&event.button==1&&dragapproved){ if(temp1+event.clientX-x1>leftboundary) themenu.pixelLeft=Math.min(rightboundary,temp1+event.clientX-x1) else themenu.pixelLeft=Math.max(leftboundary,temp1+event.clientX-x1) } else if (document.layers){ if(themenu.left+e.x-x2>leftboundary) themenu.left=Math.min(rightboundary+2,themenu.left+e.x-x2) else themenu.left=Math.max(leftboundary-2,themenu.left+e.x-x2) } } function drags(e){ if (document.all){ dragapproved=true temp1=themenu.pixelLeft x1=event.clientX document.onmousemove=move } else{ themenu.captureEvents(Event.MOUSEMOVE) x2=e.x } } function stopit(){ if (document.all){ dragapproved=false } if (document.layers) themenu.releaseEvents(Event.MOUSEMOVE) } if (document.all){ document.all.slidemenubar2.onmousedown=drags document.all.slidemenubar2.onmouseup=new Function("dragapproved=false") document.onselectstart=new Function("return false") } else if (document.layers){ themenu.onmousedown=drags themenu.onmousemove=move themenu.onmouseup=stopit } </script>

Sposób opisu linków za pomocą łatwo konfigurowalnych okienek mogących zawierać tekst czy też grafikę.

HEAD:
<script language="javascript" type="text/javascript"> <!-- // This code is from Dynamic Web Coding www.dyn-web.com // Copyright 2002 by Sharon Paine Permission granted to use this code as long as this entire notice is included. // Permission granted to SimplytheBest.net to feature script in its // DHTML script collection at http://simplythebest.net/scripts/dhtml_scripts.html var dom = (document.getElementById) ? true : false; var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false; var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false; var ns4 = (document.layers && !dom) ? true : false; var ie4 = (document.all && !dom) ? true : false; var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false; var origWidth, origHeight; if (ns4) { origWidth = window.innerWidth; origHeight = window.innerHeight; window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); } } if (nodyn) { event = "nope" } var tipFollowMouse = true; var tipWidth = 160; var offX = 12; // how far from mouse to show tip var offY = 12; var tipFontFamily = "Verdana, arial, helvetica, sans-serif"; var tipFontSize = "8pt"; var tipFontColor = "#000000"; var tipBgColor = "#DDECFF"; var origBgColor = tipBgColor; // in case no bgColor set in array var tipBorderColor = "#000080"; var tipBorderWidth = 2; var tipBorderStyle = "ridge"; var tipPadding = 4; var messages = new Array(); messages[0] = new Array('http://planmagic.com/images/plmbiz.jpg','Professional business planning software.',"#FFFFFF"); messages[1] = new Array('http://planmagic.com/images/plmmar.jpg','Professional marketing planning software.',"#DDECFF"); messages[2] = new Array('http://planmagic.com/images/plmwq.jpg','The web marketing planning generator.',"#FFFFCC"); messages[3] = new Array('http://planmagic.com/images/plmfinance.jpg','Financial calculations and projections made easy.',"#E9E9E9"); if (document.images) { var theImgs = new Array(); for (var i=0; i<messages.length; i++) { theImgs[i] = new Image(); theImgs[i].src = messages[i][0]; } } var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="'; var midStr = '" border="0"></td></tr><tr><td valign="top">'; var endStr = '</td></tr></table>'; var tooltip, tipcss; function initTip() { if (nodyn) return; tooltip = (ns4)? document.tipDiv.document: (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null; tipcss = (ns4)? document.tipDiv: tooltip.style; if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites tipcss.width = tipWidth+"px"; tipcss.fontFamily = tipFontFamily; tipcss.fontSize = tipFontSize; tipcss.color = tipFontColor; tipcss.backgroundColor = tipBgColor; tipcss.borderColor = tipBorderColor; tipcss.borderWidth = tipBorderWidth+"px"; tipcss.padding = tipPadding+"px"; tipcss.borderStyle = tipBorderStyle; } if (tooltip&&tipFollowMouse) { if (ns4) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = trackMouse; } } window.onload = initTip; var t1,t2; // for setTimeouts var tipOn = false; // check if over tooltip link function doTooltip(evt,num) { if (!tooltip) return; if (t1) clearTimeout(t1); if (t2) clearTimeout(t2); tipOn = true; // set colors if included in messages array if (messages[num][2]) var curBgColor = messages[num][2]; else curBgColor = tipBgColor; if (messages[num][3]) var curFontColor = messages[num][3]; else curFontColor = tipFontColor; if (ns4) { var tip = '<table bgcolor="' + tipBorderColor + '" width="' + tipWidth + '" cellspacing="0" cellpadding="' + tipBorderWidth + '" border="0"><tr><td><table bgcolor="' + curBgColor + '" width="100%" cellspacing="0" cellpadding="' + tipPadding + '" border="0"><tr><td>'+ startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr + '</td></tr></table></td></tr></table>'; tooltip.write(tip); tooltip.close(); } else if (ie4||ie5||ns5) { var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr; tipcss.backgroundColor = curBgColor; tooltip.innerHTML = tip; } if (!tipFollowMouse) positionTip(evt); else t1=setTimeout("tipcss.visibility='visible'",100); } var mouseX, mouseY; function trackMouse(evt) { mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft; mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop; if (tipOn) positionTip(evt); } function positionTip(evt) { if (!tipFollowMouse) { mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft; mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop; } // tooltip width and height var tpWd = (ns4)? tooltip.width: (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth; var tpHt = (ns4)? tooltip.height: (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight; // document area in view (subtract scrollbar width for ns) var winWd = (ns4||ns5)? window.innerWidth-20+window.pageXOffset: document.body.clientWidth+document.body.scrollLeft; var winHt = (ns4||ns5)? window.innerHeight-20+window.pageYOffset: document.body.clientHeight+document.body.scrollTop; // check mouse position against tip and window dimensions // and position the tooltip if ((mouseX+offX+tpWd)>winWd) tipcss.left = (ns4)? mouseX-(tpWd+offX): mouseX-(tpWd+offX)+"px"; else tipcss.left = (ns4)? mouseX+offX: mouseX+offX+"px"; if ((mouseY+offY+tpHt)>winHt) tipcss.top = (ns4)? winHt-(tpHt+offY): winHt-(tpHt+offY)+"px"; else tipcss.top = (ns4)? mouseY+offY: mouseY+offY+"px"; if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100); } function hideTip() { if (!tooltip) return; t2=setTimeout("tipcss.visibility='hidden'",100); tipOn = false; } //--> </script>

BODY:
<div id="tipDiv" style="width:200px; height:200px; position:absolute; left:50px; top:50px; z-index:100; visibility:hidden;"> <p> </p> </div> <a href="dhtml_scripts.html" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">Simply the Best DHTML Scripts</a> <p> <a href="dhtml_messages.html" onmouseover="doTooltip(event,1)" onmouseout="hideTip()">Simply the Best DHTML message scripts</a> </p>

Skrypt daje możliwość łatwego i szczegółowego opisu linków.

HEAD:
<script> <!-- /* Textual Tooltip Script- (c) Dynamic Drive (www.dynamicdrive.com) For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com */ var content=new Array() //change the array below to the text associated with your links Expand or contract the array, depending on how many links you have content[0]='<br><big><b>Menus and navigation systems</b></big><br>Click here for DHTML scripts that help enhance your site\'s navigability, such as collapsible menus, sliding menu bars etc.' content[1]='<br><big><b>Special document effects</b></big><br>With the advent of DHTML, webpages are one step closer to its cousin, TV, in terms of special effects...' content[2]='<br><big><b>Scrollers</b></big><br>Up until now, adding a scroller or tickertape to your website usually meant using a slow Java applet. Not anymore. Click here for DHTML scrollers that accomplish the same task with minimal download time.' content[3]='<br><big><b>Image effects</b></big><br>Add lightweight effects to your existing images using these scripts. Make them fly, light up, turn static, all without paying the cost of slow downloading time.' content[4]='<br><big><b>Links and buttons</b></big><br>Add tooltips to your text links, rollover effects to your form buttons, keyboard features to your document, and more.' content[5]='<br><big><b>Dynamic clocks and dates</b></big><br>Time is never static, so why should your time script be? Enter for DHTML scripts that actually understand this simple truth.' content[6]='<br><big><b>Text animations</b></big><br>Text have been silent for too long- DHTML promises to free them, with flying text, typing text, dragable text, and more.' content[7]='<br><big><b>Browser window</b></big><br>Click here scripts related to the browser window and frames.' content[8]='<br><big><b>Other</b></big><br>All scripts that don\'t comfortably fit in any of the above categories go here...' function regenerate(){ window.location.reload() } function regenerate2(){ if (document.layers){ appear() setTimeout("window.onresize=regenerate",450) } } function changetext(whichcontent){ if (document.all||document.getElementById){ cross_el=document.getElementById? document.getElementById("descriptions"):document.all.descriptions cross_el.innerHTML='<font face="Verdana"><small>'+whichcontent+'<font></small>' } else if (document.layers){ document.d1.document.d2.document.write('<font face="Verdana"><small>'+whichcontent+'</small></font>') document.d1.document.d2.document.close() } } function appear(){ document.d1.visibility='show' } window.onload=regenerate2 //--> </script>

BODY:
<div id="scriptmenu" style="line-height:20px"><p><strong><font face="Verdana"><a href="../dynamicindex1/index.html" onMouseover="changetext(content[0])"><small>Menus and Navigation Systems</small></a><br> <a href="../dynamicindex3/index.html" onMouseover="changetext(content[1])"><small>Special document effects</small></a><br> <a href="../dynamicindex2/index.html" onMouseover="changetext(content[2])"><small>Scrollers</small></a><br> <a href="../dynamicindex4/index.html" onMouseover="changetext(content[3])"><small>Image effects</small></a><br> <a href="index.html" onMouseover="changetext(content[4])"><small>Links and buttons</small></a><br> <a href="../dynamicindex6/index.html" onMouseover="changetext(content[5])"><small>Dynamic Clocks and dates</small></a><br> <a href="../dynamicindex10/index.html" onMouseover="changetext(content[6])"><small>Text animations</small></a><br> <a href="../dynamicindex8/index.html" onMouseover="changetext(content[7])"><small>Browser Window</small></a><br> <a href="../dynamicindex11/index.html" onMouseover="changetext(content[8])"><small>Other</small></a></font></strong></p> </div> <ilayer id="d1" width="200" height="200" visibility="hide"> <layer id="d2" width="200" height="200"> <div id="descriptions" align="left"> <!--Change below to default content of your own--> <strong><font face="Verdana" color="#000000"><p>Welcome to our new look!<br> </font></strong><font face="Verdana"><small>Hope you like the new look for Dynamic Drive. This is the first in a series of steps we're taking to improve our site. In the very near future, you can expect many cool features such as a new forum, newsletter, feedback form, and more, to be introduced. Enjoy!</small><br> </font> <!--Stop editting--> </div> </ilayer> </layer>