Online Shopping : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

34 of 39 people (87%) answered Yes
Recently 7 of 10 people (70%) answered Yes

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