Reply to thread

Message: [QUOTE="RobG, post: 4925528"] The only way I know of is to store the location of the divs in page co-ordinates (top, right, bottom, left) then have an onmousemove function that checks to see which divs the cursor is over at each move. You can use onmouseover/out on the divs to start/stop the onmousemove function so that it only runs when the cursor is actually over one of the relevant divs. Here is a very simple example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL]http://www.w3.org/TR/html4/strict.dtd[/URL]"> <html> <title>mouseover play</title> <style type="text/css"> body {margin: 0; padding:0;} #container { position: relative; width: 200px; height: 200px; background-color: #ddd; } #redDiv { width:100px; height:100px; border:1px solid red; position: absolute; top: 0px; left: 0px; } #blueDiv { width:100px; height:100px; border:1px solid blue; position: absolute; top: 50px; left: 50px; } </style> <div id="container" onmouseover="isOver.start();" onmouseout="isOver.stop();"<div id="redDiv">red div</div> <div id="blueDiv">blue div</div> </div> Tracking <span id="tOnOff"><b>OFF</b></span> <script type="text/javascript"> var isOver = (function() { var docBody = document.body || document.documentElement; // Hard coded here but would calculate dynamically in real life var zones = {}; // References to drop zones zones.elA = document.getElementById('redDiv'); zones.elB = document.getElementById('blueDiv'); zones.elA.edges = {top:0, right:100, bottom:100, left:0}; zones.elB.edges = {top:50, right:150, bottom:150, left:50}; function cursorPos(e){ var e = e || window.event; var posXY = {x:0, y:0}; if (e.pageX || e.pageY) { posXY.x += e.pageX; posXY.y += e.pageY; } else if (e.clientX || e.clientY){ posXY.x += e.clientX + document.body.scrollLeft; posXY.y += e.clientY + document.body.scrollTop; } return posXY; } function trackCursor(e){ var e = e || window.event; var posXY = cursorPos(e); var dz; for (el in zones){ dz = zones[el]; if ( pointInRect(posXY, dz.edges) ) { dz.innerHTML = 'over'; dz.style.backgroundColor = '#aae'; } else { dz.innerHTML = 'out'; dz.style.backgroundColor = '#fff'; } } } function pointInRect(pos, rect){ return ( pos.x > rect.left && pos.x < rect.right && pos.y > rect.top && pos.y < rect.bottom ); } return ({ start : function() { docBody.onmousemove = trackCursor; document.getElementById('tOnOff').innerHTML = "<b>ON</b>"; }, stop : function() { docBody.onmousemove = null; document.getElementById('tOnOff').innerHTML = "<b>OFF</b>"; } }); })(); </script> </html> [/QUOTE]

Verification