Dynamic Tooltips: The Entire Code (#1) - Doc JavaScript | WebReference

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>

http://www.internet.com


Created: March 26, 1998
Revised: March 26, 1998

URL: http://www.webreference.com/js/column16/code1.html