Click here for a printer-friendly version.
<HTML><head><title>Tooltip and Popup Window Demo</title>
<STYLE TYPE="text/css">
<!--
.ttip { text-decoration: none; }
//-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--hiding content from the browsers
var NS4 = (document.layers) ? 1 : 0;
var IE4 = (document.all) ? 1 : 0;
function clearEl() {}
//end of hiding --></SCRIPT>
</HEAD>
<BODY onUnload="closeDep()">
<H3>Tooltip and Popup Window Demo</H3>
The first tooltip <a href="javascript:popup(demo1)"
onMouseOver="if (NS4 || IE4) activateEl('tip1', event);"
onMouseOut="clearEl();">here</a>.
The second tooltip <a class=ttip href="javascript:void(0)"
onMouseOver="if (NS4 || IE4) activateEl('tip2', event);"
onMouseOut="clearEl();">here</a>.
The third tooltip <a href="javascript:popup(demo3)"
onMouseOver="if (NS4 || IE4) activateEl('tip3', event);"
onMouseOut="clearEl();">here</a>.
The fourth tooltip is a clickable one, you have to click
<a href="javascript:void(0)"
onClick="if (NS4 || IE4) activateEl('tip3', event);"
onMouseOut="clearEl();">here</a> to see it.
<a href="javascript:printwhole()">
Click here for a printer-friendly version.</a>
<SPAN ID="test" STYLE="position: absolute;"></SPAN>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="tooltip.js">
<!--
// -->
</SCRIPT>
<hr>
</BODY></HTML>
Here is the Javascript file associated with this HTML file. The content of each popup window or tooltip is defined in this file. There are also intructions on how to modify in each part where changes have to be made in order to add more popup windows or tooltips.
- If you want to add another popup window you need first name it and add it to your html page, and then define the content of it in the Javascript file. In order for it to appear in the printer-friendly version, just add the name of the string to the string variable called longStr in the function printwhole.
- For the toolip, the only thing you have to do, is to add one line calling function makeEl.
- After modifying the Javascript file, remember to save it as a Javascript file (with extension .js) and put it in the same directory of your HTML file.