Dynamic Tooltips: The Entire Code (#1) - Doc JavaScript
   |
The Entire Code (#1)
<HTML>
<HEAD>
<TITLE>Title Here</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var NS4 = (document.layers) ? 1 : 0;
var IE4 = (document.all) ? 1 : 0;
function clearEl() {}
// -->
</SCRIPT>
</HEAD>
<BODY>
.
.
.
<A HREF="/"
onMouseOver="if (NS4 || IE4) activateEl('home', event)"
onMouseOut="clearEl()">home</A> /
<A HREF="/experts/"
onMouseOver="if (NS4 || IE4) activateEl('experts', event)"
onMouseOut="clearEl()">experts</A> /
<A HREF="/js/"
onMouseOver="if (NS4 || IE4) activateEl('javascript', event)"
onMouseOut="clearEl()">javascript</A> / column16
.
.
.
<SPAN ID="test" STYLE="position: absolute;"></SPAN>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
var style = ((NS4 && document.test) || IE4) ? 1 : 0;
var timerID = null;
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("home", 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>.");
makeEl("experts", 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.");
makeEl("javascript", 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.");
function init() {
setTimeout("window.onresize = redo", 1000);
}
function redo() {
window.location.reload();
}
function makeEl(id, width, code) {
if (!style) return;
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() {
if (!style) return;
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(id, e) {
if (!style) return;
active = id;
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/code1.html
Find a programming school near you