| Remember, no matter where you go, there you are. And if you want to know where you are in the browser window, this is the script for you. All mousegenerated events include information in the event object, specifying not only where the event occurred in the browser window using the clientX and clientY properties (Figure 15.9), but also where within the entire screen using screenX and screenY the event occurred (Figure 15.10). Figure 15.9. The general syntax for detecting where the mouse was clicked in the browser window. 
Figure 15.10. The general syntax for detecting where the mouse button was clicked within the screen. 
In this example (Figures 15.11 and 15.12), clicking anywhere will produce an alert that displays the coordinates for where you clicked within the browser window and then an alert showing the coordinates for where you clicked on the screen. Figure 15.11. An alert tells you where you clicked in the browser window. 
Figure 15.12. An alert tells you where you clicked within the entire screen area. 
To find the mouse pointer's position: 1. | function initPage() {...}
Add the function initPage() to your JavaScript and bind a mouseDown event to an object (Code 15.5).
Code 15.5. The event object properties clientX and clientY are used to find the mouse's place in the browser window. The event object properties screenX and screenY are used to determine the mouse's position within the entire screen.| [View full width] <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1  /DTD/xhtml1strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta httpequiv="ContentType" content="text/html;charset=utf8" /> <title>CSS,DHTML & Ajax | Detecting Where the Mouse Clicked</title> <script type="text/javascript"> function initPage(objectID) { var object = document.getElementById(objectID); object.onmousedown = findMouseLocation; window.document.onclick = findMouseLocation; } function findMouseLocation(evt) { var evt = (evt) ? evt : ((window.event) ? window.event : null); alert ('Browser horizontal = ' + evt.clientX + ', Browser vertical = ' + evt.clientY); alert ('Screen horizontal = ' + evt.screenX + ', Screen vertical = ' + evt.screenY); } </script> <style type="text/css" media="screen"> #object1 { position: relative; top: 50px; left: 100px; width: 392px; cursor: pointer; border: solid 2px #f00; } </style> </head> <body onload="initPage('object1')"> <h1>Click me and I will tell you where you clicked.</h1> <div ><img src="/books/3/292/1/html/2/alice06a.gif" height="480" width="392" alt="alice" /></div> </body></html>
|
In this example, I'm including event binders for a particular element (object1) and to detect where the mouse cursor is pressed, although it shows you the position relative to the entire Web page. You can use one or the other, depending on your needs.
| 2. | function findMouseLocation(evt) {...}
Add the function findMouseLocation() to your JavaScript. This code first uses the event equalizer discussed in Chapter 12 ("Passing Events to a Function") to allow Internet Explorer and W3Ccompliant browsers to play together.
Use the clientX and clientY event properties to find the mouse's position in the browser window. Use the screenX and screenY event properties to find the mouse's position in the screen. For this example, I simply added an alert to report the mouse's position.
| 3. | onload="initPage();"
Add an onload event handler in the <body> tag to trigger the initPage() function created in Step 1. This sets up the events for the page.
|
 Tips
Although the mouse's yposition in the browser (clientY) is measured from the top of the browser window, its yposition in the screen (screenY) is measured from the bottom of the screen. The obvious application of this is to use the onmousemove event handler so that your JavaScript can track where the mouse is at any given moment.
|
