Today is . Page created 05/31/07

GPS Navigation Detect Mouse/Cursor Position Mouse

You can store them
in form fields
x = y =

Or as plain text

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.

We have tested the code in IE 7.0, Firefox 2.0.0.4, Opera 9.21, Netscape 8.1.3 and AOL Explorer 1.5. This script worked well in all platforms with no variations observed.

Depending on your knowledge of HTML and javascripts, this is an easy two (2) part copy and paste code that goes in both the <HEAD> and <BODY> sections (wherever you want it to appear) of your document. It also makes use of an external .js file (with reconfigurations to remove one of the two options - plain text or form fields) you need to save and upload into your directory then add a snipplet of code into the <HEAD> section to call the external.js file.

Warning Logo     Note Of Importance:     If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained.
[ .js File Howto ]

For Your Information For your Information:     If you are not comfortable or prefer not to use the external.js file, you can use the traditional cut/copy and paste instead of the external .js file. If you need a little refresher on what is required to achieve this, grab the below link and it is fully explained.
[ Traditional Cut/Copy and Paste ]

Depending on which of the above methods you have selected (external.js file or Traditional Copy/Cut & Paste), you will add either the snipplet of code (after you have uploaded the external.js file) into the <HEAD> section or the completed section of code that you added the opening and closing script tags.

Snipplet Of Code

<script type="text/javascript" src="mousePosition.js">
</script>
Traditional Copy/Cut and Paste

<SCRIPT LANGUAGE="JavaScript">

<HEAD> Section of code goes here

//  End -->
</script>
Arrow External .js file



Arrow Traditional Copy/Cut & Paste Code with opening & closing tags that you had to add into the <HEAD> section of code that was originally earmarked to be an external .js file.

If you would like to see an example of this effect using the "Traditional Cut/Copy & Paste" method, grab the below link and you are there. Examine our "Source" code (on the page you will be opening) to see how we had to reconfigure it to make it work. We have it very well documented for your convenience.
[ Traditional Cut/Copy & Paste Method ]

O nce you have completed either of the above steps for the <HEAD> section, all that is left is to paste the <BODY> section of code where you want the effect to appear.

On A Final Note     Depending on which of the two (2) options (form field or plain text) you decide to use , just remove the other part of the code in the <BODY> section and within the external.js file. See below where and howto.

<!------ <BODY> Section Removal ------>

<h4>You can store them in form fields</h4>
<!------ Start Form Option ------>

<form name="theform">
x = <input name="xcoord" type="text" readonly size="5">
y = <input name="ycoord" type="text" readonly size="5">
</form>

<!------ End Form Option ------>

<!------ Start Plain Text Option ------>

<p>
<h4>or as plain text</h4>
<span id="spanx"> </span> <span id="spany"> </span>
</p>

<!------ End Plain Text Option ------>

The above section should be quite self-evident. Just remove whichever part you do not want visible and then also reflect that in the section of code to the right of this which is the external.js file. If you would like to see an example of how we removed the text options and all you see is the form elements, grab the below link and you are there.
[ Remove Text Elements Example ]

<!------ External.JS File Section Removal ------>

For Your Information For your Information:     On the below section of code you will need to remove all lines of code that call the section you do not want. For example, the text part reflects all lines of code that call the spanx and spany. The form elements reflect all the lines of code that reflect theform. In other words, if you would remove the section that calls the text option, then the below code would reflect the removal of those parts that reference spanx and spany.
We will show the removal by striking out those lines of code.

/* 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;
}

Point Of Information Point Of Information     On the page you are going to have this effect on or any page that will link to the page with this effect, be sure of one thing within either the linking URL or the URL this effect is on. Do Not have the backslash-forward slash / (whichever you call it) at the end of the URL or linked to URL. If you do, the effect Will Not Work!. If this sounds confusing, see the below example:

  • Right Way:    https://www.angelfire.com/ny5/consigliere/detectmouseposition.html

  • Wrong Way:    https://www.angelfire.com/ny5/consigliere/detectmouseposition.html/

S elect the links above to see what we are explaining about the Right and Wrong URL address.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]   [ Rate This Page ]   Digg It!