Detecting Mouse Position

Roy Marchand May 30, 2007

General

This is an easy way to determine the mouse position on a Web page. Click anywhere on the page and the coordinates will be displayed.

You can store them in form fields

or as plain text

Notes

Created by: Roy Marchand
Web Site: http://www.expertsrt.com
Posted: May 30, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: mousePosition.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Roy Marchand | http://www.expertsrt.com */
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;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="mousePosition.js"></script>

Body

Paste this code into the BODY section of your HTML document


<h4>You can store them in form fields</h4>
<form name="theform">
x = <input name="xcoord" type="text" readonly size="5"> 
y = <input name="ycoord" type="text" readonly size="5">
</form>
<p>
<h4>or as plain text</h4>
<span id="spanx"> </span> <span id="spany"> </span>

Leave a Response

(2 comments)

It really works in all browsers i tested. Thanks! I have tried many other types of cursor position functions but this really works and it is very easy to understand and use.[br /][br /]We thank you THE JAVASCRIPT SOURCE!

Adrian May 2, 2008

Thank's[br /]Interesting for use with CSS !

lavercq Jun 2, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details