I would add 'position:absolute;top:100px;left:80px;' rules to <span>.
Then, when onMouseOut reads the current mouse coordinates, it shows
the alert-window only if these coordinates left the <span>'s absolute
positioning.
I don't see any other immediate possibilities.
Be posx and posy the X/Y-coordinates of the mouse at onMouseOut:
var span_height = 100;
var span_width = 100;
var span_top = 50;
var span_left = 70;
if ( posx >= span_width + span_left
|| posx <= span_left
|| posy >= span_height + span_top
|| posy <= span_top
)
alert('you left');
Hope this helps,
Thats absolutely great - many thanks indeed.
Only slight note - that for some reason I found in IE 7 - the alert
box wasnt always triggered even though it did correctly pick up the co-
ordinates. The solution was to write the output to a new span instead.
So for anyone referencing this - my full page now stands at:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=windows-1250">
<title></title>
</head>
<body class="ts" style="padding:0px;">
<script>
function alerter(e){
var span_height = 100;
var span_width = 100;
var span_top = 100;
var span_left = 80;
var posx = 0;
var posy = 0;
if (!e) e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
if ( posx >= span_width + span_left
|| posx <= span_left
|| posy >= span_height + span_top
|| posy <= span_top
){
document.getElementById('test_pos').innerHTML = 'x:'+posx+'
y:'+posy;
}
}
</script>
<p>
<span style="height:100px;width:100px;background-color:lightblue;
position:absolute;top:100px;left:80px;"
onMouseOut="alerter(event);">
text here
<input type="checkbox" style="background-color:red;" value="test"
id="test">
</span>
</p>
<p><span id='test_pos'>test</span></p>
</body>
</html>
