Detecting Mouse Position
This is an easy way to determine the mouse position (click anywhere and the co-ordinates get displayed:
Of course knowing the co-ordinates also makes it possible to position elements based on the position of the mouse pointer. It will work for any mouse event Mouseover, mouseout, etc; just change click to the desired event in the final if statement of the script. More good stuff and articles at the home of real IT Mentors
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title>Mouse co-ordinates</title> <style type="text/CSS"> .holder {background-color:lightyellow;color:blue;width:40} </style> <script type="text/javascript"> function showit() { document.forms['theform'].xcoord.value=event.x; document.getElementById('spanx').innerHTML='x='+event.x; document.forms.theform.ycoord.value=event.y; document.getElementById('spany').innerHTML='y='+event.y; } function showitMOZ(e) { document.forms['theform'].xcoord.value=e.pageX; document.getElementById('spanx').innerHTML='x='+e.pageX; document.getElementById('spany').innerHTML='y='+e.pageY; document.forms.theform.ycoord.value=e.pageY; } if (!document.all){ window.captureEvents(Event.CLICK); window.onclick=showitMOZ; } else { document.onclick=showit; } </script> </head> <body> <br><br><br> <h1>You can store them in form fields</h1> <form name="theform"> x = <input name="xcoord" style="width:40"> y = <input name="ycoord" style="width:40"> </form> <br /><br /> <h1> or as plain text</h1> <span id="spanx"> </span> <span id="spany"> </span> </body> </html>
Of course knowing the co-ordinates also makes it possible to position elements based on the position of the mouse pointer. It will work for any mouse event Mouseover, mouseout, etc; just change click to the desired event in the final if statement of the script. More good stuff and articles at the home of real IT Mentors
