Entry
How do I monitor mouse speed so a tool tip shows only on slow mouseovers but not on fast ones in NN4
Apr 6th, 2008 19:26
ha mo, Mark Szlazak, Patrick Benny, http://www.siteexperts.com/forums/viewConverse.asp?d_id=8156&Sort;=0&t;=all
Typically, scripts for NN4 show tool-tips immediately or a bit after a
onmouseover event. However, mouse over speed is usually not taken into
account as it is in application buttons like those found in NN4's
navigation toolbar. These only show their tips with "slow" mouse overs.
Here, an NN4 only script reproduces this same effect.
A layer called "tooltip" holds the tip and is rewritten on each mouse
over. An elements onmouseover attribute is assigned the startMonitor()
handler which passes its tip text.
onmouseover="startMonitor('Yellow Ball')"
This handler then sets up event capture for mouse movement and stores
mouse cursor positions in variables mouseX and mouseY. It then starts
the timer monitorMouse() which measures mouse cursor speed by sampling
the values in these variables at regular intervals. The variables
mouseLeft and mouseTop hold each samplings mouse positions and the
sampling rate is set to 100 milliseconds in the variable
monitor.timerDelay.
A "slow" mouse speed occurs when its cursor has not moved more than a
preset limit between two successive samplings. The movement limit in
moveLimit to set to 2 pixels, giving a maximum slow mouse speed of 20
pixels per second. Also, the tip is kept from appearing if this slow
speed isn't maintained for a minimum number of successive samples.
The variable monitor.slowSamples is always reset to zero when the mouse
is moving fast but incremented each sampling when moving slowly. With
enough successive increments, monitor.slowSamples will reach a limit,
the tip will then be shown and the timer stopped. The duration of this
period is equal to the timers delay multiplied by the sample limit.
Here monitor.sampleLimit is set to 10, giving a required 1 second
period of slow mouse movement before a tip is shown.
if (Math.abs(mouseX - mouseLeft) > monitor.moveLimit
|| Math.abs(mouseY - mouseTop) > monitor.moveLimit)
{
monitor.slowSamples = 0;
}
else if (++monitor.slowSamples > monitor.sampleLimit) {
showTooltip();
return;
}
mouseLeft = mouseX;
mouseTop = mouseY;
monitor.timer = setTimeout("monitorMouse()",monitor.timerDelay);
The mouse out handler stopMonitor(), hides the tool tip, clears any
remaining timeout and releases document mouse move capture. Here's the
entire script using an image map example.
<html>
<head>
<script>
nn4 = (document.layers)? true:false;
mouseLeft = mouseTop = mouseX = mouseY = 0;
monitor = {
timerDelay:100,
moveLimit:2,
sampleLimit:10
};
function startMonitor(thisText) {
if (!tip) return;
toolTipText = thisText;
writeTooltip(toolTipText);
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = function (evt) {
mouseX = evt.pageX;
mouseY = evt.pageY;
return true;
}
monitorMouse();
}
function stopMonitor() {
if (!tip) return;
hideTooltip();
if (monitor.timer) {
clearTimeout(monitor.timer);
monitor.timer = null;
}
document.releaseEvents(Event.MOUSEMOVE);
document.onmousemove = null;
monitor.slowSamples = 0;
}
function monitorMouse() {
if (Math.abs(mouseX - mouseLeft) > monitor.moveLimit
|| Math.abs(mouseY - mouseTop) > monitor.moveLimit)
{
monitor.slowSamples = 0;
}
else if (++monitor.slowSamples > monitor.sampleLimit) {
showTooltip();
return;
}
mouseLeft = mouseX;
mouseTop = mouseY;
monitor.timer = setTimeout("monitorMouse()",monitor.timerDelay);
}
function writeTooltip(tipText) {
tip.document.write(
'<table cellpadding=1 cellspacing=0 border=0
bgColor=#000000><tr><td>'
+ '<table cellpadding=2 cellspacing=0 border=0
bgColor=#ffffe0>'
+ '<tr><td><font face=verdana size=1>' + tipText
+ '<\/font><\/td><\/tr>'
+ '<\/table><\/td><\/tr><\/table>'
);
tip.document.close();
}
function showTooltip() {
tip.left = mouseLeft + 15;
tip.top = mouseTop + 20;
tip.visibility = "show";
}
function hideTooltip() {
tip.visibility = "hide";
}
function loadHandler() {
if (nn4) {
tip = document.tooltip;
}
else {
tip = null;
alert('Script only works in Netscape 4');
}
}
onload = loadHandler;
</script>
</head>
<body>
<layer id="tooltip" bgColor="#ffffff" visibility="hide" z-
index="1"></layer>
<map name="imagemap">
<area shape="rect" coords="57, 78, 135, 138" href="javascript:;"
onmouseover="startMonitor('Red Ball')" onmouseout="stopMonitor()">
<area shape="rect" coords="103, 10, 174, 75" href="javascript:;"
onmouseover="startMonitor('Yellow Ball')" onmouseout="stopMonitor()">
<area shape="rect" coords="13, 10, 89, 72" href="javascript:;"
onmouseover="startMonitor('Eight Ball <br>\'In the corner pocket\'')"
onmouseout="stopMonitor()">
</map>
<img src="http://www.dynamicdrive.com/dynamicindex5/imagemap.gif"
width="188" height="173" border="0" usemap="#imagemap">
</body>
</html>
http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com
![http://www.dynamicdrive.com/dynamicindex5/imagemap.gif"](http://www.dynamicdrive.com/dynamicindex5/imagemap.gif"){kind=link}