JavaScript Made Easy: Free JavaScripts Tutorials Example Code

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



Popup information box II

Use these colorful popups to provide additional information about any link, inline and non intrusively as the mouse moves over the link. Cool, we say!
Website Abstraction WebMonkey

Insert into <HEAD>
<style TYPE="text/css"> <!-- body{ overflow:scroll;overflow-x:hidden } .popper { position : absolute; visibility : hidden; } //--> </style>

Insert into <BODY>
<DIV ID="topdeck" CLASS="popper"> </DIV> <SCRIPT> var nav = (document.layers); var iex = (document.all); var skn = (nav) ? document.topdeck : topdeck.style; if (nav) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = get_mouse; function pop(msg,bak) { var content ="<TABLE WIDTH=130 BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=#000000><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><CENTER><FONT COLOR=#FFFFFF SIZE=2><B>Detailed Info</B></FONT></CENTER></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR="+bak+"><TR><TD><FONT COLOR=#000000 SIZE=2><CENTER>"+msg+"</CENTER></FONT></TD></TR></TABLE></TD></TR></TABLE>"; if (nav) { skn.document.write(content); skn.document.close(); skn.visibility = "visible"; } else if (iex) { document.all("topdeck").innerHTML = content; skn.visibility = "visible"; } } function get_mouse(e) { var x = (nav) ? e.pageX : event.x+document.body.scrollLeft; var y = (nav) ? e.pageY : event.y+document.body.scrollTop; skn.left = x - 60; skn.top = y+20; } function kill() { skn.visibility = "hidden"; } </SCRIPT>

Other Options
Step 3: Finally, add the following inside any link that will contain a popup: ONMOUSEOVER="pop('Link description here','yellow')"; ONMOUSEOUT="kill()" where the first parameter inside pop() dictates the text to be displayed, and the second, the color of the box itself. Here are a couple of examples: <a href="http://wsabstract.com" ONMOUSEOVER="pop('Website Abstraction, the definitive JavaScript site on the net.','lightgreen')"; ONMOUSEOUT="kill()">Website Abstraction</a> <a href="http://webmonkey.com" ONMOUSEOVER="pop('Tutorials and tips for the advanced webmaster','lightgreen')"; ONMOUSEOUT="kill()">WebMonkey</a> Enjoy!