Tracking the Cursor X/Y Coordinates
|
|
Cursor X & Y Coordinates plus Browser Access Keys
On this page, press and hold the 'Alt' key, then press the 'Z' key to toggle the
X/Y coordinates layer on and off. For Firefox, you'll need to hold
down the 'Shift' and 'Alt' keys simultaneously, along with the 'z' accesskey. This nifty functionality is achieved
using Access Keys.
[ More on Access Keys ]
As you move your cursor (aka, mouse pointer) around on this webpage, the X and Y
coordinates are indicated in a DHTML layer near the cursor. These coordinates indicate
the distance, in pixels, between the upper left corner of this webpage and the
current location of the cursor.[ More on Access Keys ]
You can show/hide the coordinates info at any time by holding the 'Alt' key and pressing 'Z'. This functionality is achieved using the accesskey attribute of the <a> tag (more info).
Tracking the Cursor
On this brenz.net webpage you're viewing, the X/Y Coordinates appear in a <div> layer which is dynamically updated as you move your cursor, but in the example code I'm providing below, the coordinates will be displayed in a javascript alert box when the page is clicked. The first step in tracking the X/Y mouse coordinates is to assign an onMouseUp event handler to our document with the value getXYPosition (our custom javascript function that we'll create later). Now, each mouseup event (the point in clicking the mouse when you release the button) on this page will make a call to our custom function. To implement, put this javascript block at the top of the page (before the closing <head> tag):
<script type="text/javascript">
document.onmouseup=getXYPosition;
</script>
document.onmouseup=getXYPosition;
</script>
The rest of the work is done by the getXYPosition() and toggleXY() javascript functions, which can be either in the <head> area of your HTML page, or in a separate javascript file:
// Cursor coordinate functions
var myX, myY, xyOn, myMouseX, myMouseY;
xyOn = true;
function getXYPosition(e){
myMouseX=(e||event).clientX;
myMouseY=(e||event).clientY;
if (document.documentElement.scrollTop > 0) {
myMouseY = myMouseY + document.documentElement.scrollTop;
}
if (xyOn) {
alert("X is " + myMouseX + "\nY is " + myMouseY);
}
}
function toggleXY() {
xyOn = !xyOn;
document.getElementById('xyLink').blur();
return false;
}
var myX, myY, xyOn, myMouseX, myMouseY;
xyOn = true;
function getXYPosition(e){
myMouseX=(e||event).clientX;
myMouseY=(e||event).clientY;
if (document.documentElement.scrollTop > 0) {
myMouseY = myMouseY + document.documentElement.scrollTop;
}
if (xyOn) {
alert("X is " + myMouseX + "\nY is " + myMouseY);
}
}
function toggleXY() {
xyOn = !xyOn;
document.getElementById('xyLink').blur();
return false;
}
Using Access Keys
On this page, you can toggle the X/Y Coordinates layer on/off by holding down the 'Alt' key, then pressing the 'z' key. Note: for Firefox 2.0, you'll need to hold down the 'Shift' and 'Alt' keys simultaneously, along with the 'z' accesskey.To implement an access key, you'll place a hidden hyperlink (<a> tag) within your webpage, which makes use of the accesskey attribute and calls a javascript function (toggleXY() shown above) when this hyperlink receives focus. Placing the javascript function call within the onfocus attribute provides better cross-browser support. Otherwise, Mozilla browsers (Firefox, Netscape) will actually follow the hyperlink when the accesskey is pressed, while IE merely sets the focus to the hyperlink, requiring the 'Enter' key to be pressed to activate the link. Place this hidden link somewhere on your page:
<a href="#" id="xyLink" onfocus="toggleXY();" accesskey="z"></a>
In my example I've set the accesskey value equal to 'z'. For your
implementation, you can use any single character from the document character set.Also, be advised that multiple Access Keys can be used on one page. For example, on this page, try using 'Alt' plus '0' (zero), 'Alt' plus ';' (semicolon), or 'Alt' plus 'b'. There are some others - Q,G and more...