Dynamic Tooltips: The Entire Code (#2) - Doc JavaScript
   |
The Entire Code (#2)
<HTML>
<HEAD>
<TITLE>Title Here</TITLE>
</HEAD>
<BODY>
.
.
.
<A HREF="/">home</A> /
<A HREF="/experts/">experts</A> /
<A HREF="/js/">javascript</A> / column16
.
.
.
<SPAN ID="test" STYLE="position: absolute;"></SPAN>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
var NS4 = (document.layers) ? 1 : 0;
var IE4 = (document.all) ? 1 : 0;
var style = ((NS4 && document.test) || IE4) ? 1 : 0;
var timerID = null;
var num = 1;
var padding = 3; // < 4 recommended
var bgcolor = "beige";
var borWid = 2; // for no border, assign null
var borCol = "#0000cc";
var borSty = "solid";
var str = "<STYLE TYPE='text/css'>";
str += ".tooltip {";
str += "position: absolute;";
str += "visibility: hidden;";
str += "left: 0; top: 0;";
if (borWid > 0) { // if a border is specified
str += "border-width: " + borWid + ";";
str += "border-color: " + borCol + ";";
str += "border-style: " + borSty + ";";
}
if (NS4) {
if (borWid > 0 && padding <= 3) {
str += "padding: 0;";
str += "layer-background-color: " + bgcolor + ";";
} else if (borWid > 0 && padding > 3) {
str += "padding: " + (padding - 3) + ";";
str += "background-color: " + bgcolor + ";";
} else if (borWid == 0) {
str += "padding: " + padding + ";";
str += "layer-background-color: " + bgcolor + ";";
}
} else {
str += "padding: " + padding + ";";
str += "background-color: " + bgcolor + ";";
}
str += "}";
str += "</STYLE>";
if (style) {
document.write(str);
if (NS4) window.onload = init;
}
makeEl(300, "A web site about creating web sites. -->
With thousands of select, annotated links, hourly -->
web news, noted columnists, and free services this -->
is webmaster <I>nirvana</I>.", "https://www.webreference.com/", -->
"https://www.webreference.com/index.html");
makeEl(300, "Let our leading experts keep you up to -->
date with the latest developments, featuring the columns -->
you need. Each is a respected author in their chosen -->
field.", "https://www.webreference.com/experts/");
makeEl(300, "A JavaScript how-to column with biweekly -->
prescriptions, that are sure to improve your JavaScript -->
health. Shows readers how to utilize the latest JavaScript -->
features.", "https://www.webreference.com/js/");
function init() {
setTimeout("window.onresize = redo", 1000);
}
function redo() {
window.location.reload();
}
function makeEl(width, code) {
if (!style) return;
var id = "tip" + (num++);
var args = makeEl.arguments;
for (var i = 2; i < args.length; i++) {
for (var j = 0; j < document.links.length; j++) {
if (document.links[j].href == args[i]) {
document.links[j].tooltip = id;
document.links[j].onmouseover = activateEl;
document.links[j].onmouseout = clearEl;
}
}
}
var str = "<STYLE TYPE='text/css'>";
str += "#" + id + " {";
str += "width: " + width + ";";
str += "}";
str += "</STYLE>";
str += "<DIV CLASS='tooltip' ID='" + id + "'>" -->
+ code + "</DIV>";
document.write(str);
}
function displayEl(left, top) {
if (NS4) document.releaseEvents(Event.MOUSEMOVE);
document.onmousemove = null;
var whichEl = (NS4) ? document[active] : -->
document.all[active].style;
whichEl.left = left;
whichEl.top = top;
whichEl.visibility = (NS4) ? "show" : "visible";
}
function clearEl() {
var whichEl = (NS4) ? document[active] : -->
document.all[active].style;
whichEl.visibility = (NS4) ? "hide" : "hidden";
active = null;
if (timerID) clearTimeout(timerID);
if (NS4) document.releaseEvents(Event.MOUSEMOVE);
document.onmousemove = null;
}
function activateEl(e) {
active = this.tooltip;
if (NS4) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = checkEl;
checkEl(e);
}
function checkEl(e) {
if (timerID) clearTimeout(timerID);
var left = (NS4) ? e.pageX : event.clientX + -->
document.body.scrollLeft;
var top = (NS4) ? e.pageY + 20 : event.clientY + -->
document.body.scrollTop + 20;
timerID = setTimeout("displayEl(" + left + ", " + -->
top + ")", 300);
}
// -->
</SCRIPT>
</BODY>
</HTML>
Created: March 26, 1998
Revised: March 26, 1998
URL: https://www.webreference.com/js/column16/code2.html
Find a programming school near you