Side of object mouse goes over

@PittimannJul 03.2004 — #Hi Neil!

Something like this will do the job:

[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Untitled</title>
 <script language="JavaScript" type="text/javascript">
 <!--
 var tolerance=5;
 var enter=false;
 var exit=false;
 var hor;
 var ver;
 var where;
 var w;
 var h;
 var div;
 var moz=(document.getElementById&&!document.all);
 function init(){
 div=document.getElementById('div1')
 if(moz){
 document.addEventListener('mousemove',getCoords, true);
 }
 if (document.all) {
 document.onmousemove=getCoords;
 }
 w=div.offsetWidth;
 h=div.offsetHeight;
 }
 function getCoords(e){
 if(moz){
 hor=e.clientX-parseInt(div.style.left);
 ver=e.clientY-parseInt(div.style.top);
 }
 if (document.all) {
 e = window.event;
 hor=e.offsetX;
 ver=e.offsetY;
 }
 }
 function getCoords2(overOut){
 if(enter==false){
 enter=true;
 exit=false;
 }
 else{
 enter=false;
 exit=true;
 }
 where='(movement too fast)';
 if(ver>=h-tolerance)where='bottom'
 if(hor<=tolerance)where='left'
 if(hor>w-tolerance)where='right'
 if(ver<=tolerance)where='top'
 if(overOut=='enter'){
 enter=where;
 exit=null;
 }
 if(overOut=='exit'){
 exit=where;
 enter=null;
 }
 document.getElementById('show').innerHTML='var enter='+enter+'<br>var exit='+exit;
 }
 //-->
 </script>
 </head>
 <body onload="init()">
 <div style="top:30px;left:30px;width:100px; height:100px;position:absolute;border: 1px solid black;background-color:red;" id="div1" onmousemove="return false;" onmouseover="getCoords2('enter')" onmouseout="getCoords2('exit')"></div>
 <div style="top:150px;left:30px;position:absolute;" id="show"></div>
 </body>
 </html>[/code]

If the mouse is moved too fast, the result would be ridiculous. Because of that, I put the var tolerance into the script and set the variable 'where' to "(movement too fast)" always when one of the two events is fired. So one of the four "correct" values will only be assigned, if the mouse movement was slow enough for the browser (Mozilla reacts much faster here than IE).

Please don't wonder about the fact that the word 'exit' whenever used as the variable name in the snippet above is displayed in the "wrong" colour; exit is a function in PHP.

Cheers - Pit

@neil9999authorJul 03.2004 — #Thanks for that, it's brilliant! My script needs a 'steady hand' to control so they wouldn't move the mouse too fast.

Thanks again,

Neil

@PittimannJul 03.2004 — #Hi!

You're welcome! ?

Have a nice weekend - Pit

Side of object mouse goes over

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Side of object mouse goes over

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴