The JavaScript Source: Miscellaneous : Detecting Mouse Position

Browse Doc JS's Tips!

Promotions

Free Announcements

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://javascript.internet.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>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

You can store them in form fields

or as plain text

Notes

Source Code

External file

Head

Body

User Comments

2. From: Adrian
it works
05/02/2008 03:00:03

1. From: lavercq
Langage and History
06/02/2007 12:12:27

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

You can store them in form fields

or as plain text

Notes

Source Code

External file

Head

Body

User Comments

2. From: Adrianit works05/02/2008 03:00:03

1. From: lavercqLangage and History06/02/2007 12:12:27

2. From: Adrian
it works
05/02/2008 03:00:03

1. From: lavercq
Langage and History
06/02/2007 12:12:27