Как то так, но в идеале события лучше вешать через нормальные методы, addEvenetListener. Но для примера привожу примерно так.
Возможно что-то придется под себя подкорректировать.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
background-color: #0f0;
color: #f00;
}
</style>
<script type="text/javascript">
function init() {
function mouseDirection( callback ) {
// Save old mouse position
var X, Y;
document.onmousemove = function( e ) {
// correction event for IE
e = e || window.event;
// correction page for IE
if ( e.pageX == null && e.clientX != null ) {
var html = document.documentElement,
body = document.body;
e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
}
// reset direction to default
var direction = 0;
// adjust coordinates or move starting position
X = ( X || ( X = e.pageX ) ) && X <= e.pageX + 2 && X >= e.pageX - 2 && ( e.pageY >= Y + 2 || e.pageY <= Y - 2 ) ? e.pageX : X;
Y = ( Y || ( Y = e.pageY ) ) && Y <= e.pageY + 2 && Y >= e.pageY - 2 && ( e.pageX >= X + 2 || e.pageX <= X - 2 ) ? e.pageY : Y;
// definition position
direction += Y > e.pageY ? 1 : 0; // to TOP
direction += X < e.pageX ? 2 : 0; // to RIGHT
direction += Y < ( Y = e.pageY ) ? 4 : 0; // to BOTTOM
direction += X > ( X = e.pageX ) ? 8 : 0; // to LEFT
// execute callback
callback( direction );
}
}
(function( window ) {
var direction = 0;
mouseDirection(function( dir ) {
direction = dir;
});
document.getElementById('debug').onmouseout = function() {
var pos = '';
pos += direction & 1 ? 'Top' : '';
pos += direction & 2 ? 'Right' : '';
pos += direction & 4 ? 'Bottom' : '';
pos += direction & 8 ? 'Left' : '';
document.getElementById('debug').innerHTML = pos;
}
})( window );
}
</script>
</head>
<body onload="init();">
<div id="debug"></div>
</body>
</html>
