|
Where Did the User Click?
By Stephen Bucaro
Pixel Locations
An image on a computer screen is made up of "pixels" (colored dots). The computer
screen itself consists of an array of pixels. The location of every pixel can
be described by a pair of digits representing its X location and its Y location.
A pixels X location is its distance in pixels from the left side of the screen.
A pixels Y location is its distance in pixels from the top the screen.
 If your screen
resolution is set to 800 x 600 pixels, a pixel at the center of your screen would
be located at X=400, Y=300.
A browser window uses the same coordinate system. Let's say you open a browser
window 400 pixels by 400 pixels and center it on your screen. The location of
a pixel at the center of the browser window would be X=200, Y=200. That is,
the pixel is located 200 pixels from the left side of the browser window and
200 pixels from the top the browser window.
Because the browser window is not maximized, the browser window location and the
screen location of the pixel would not be identical. Since we said the browser
window was centered on the screen, the screen pixel location would be X=400, Y=300.
Browser Objects
On a webpage you might find buttons, checkboxes, links, text, and so on. Almost
everything on a webpage is an "object". Almost all objects can respond to an
"event". An event can be triggered by the user. For example, an "onClick" event
is triggered when the user clicks a mouse button.
Both the W3C and the Internet Explorer models have an "event" object that is
triggered by any event occurring in the browser. Although the properties of the
two models differ in a number of ways, both provide properties that you can
use to determine the location of an invent in the browser window and on the
computers screen.
| Properties of the event object |
| clientX | X location in the browser window |
| clientY | Y location in the browser window |
| ScreenX | X location on the screen |
| ScreenY | Y location on the screen |
To experiment with the event object, type the code shown below into Windows
Note pad or your favorite plain ASCII text editor and save the file with the
name client.htm.
<html>
<head>
<script language="JavaScript">
function position(e)
{
document.forms(0).position.value = e.clientX +
" " + e.clientY;
}
</script>
</head>
<body onmousedown="position(event)">
<form>
<input type="text" name="position"></input>
</form>
</body>
</html>
This code creates a webpage with a text box. A Java Script function named "position"
puts the event object's clientX and clientY properties in the text box. In the
body tag, the position function is attached to the body's onmousedown event.
When you open the webpage in your browser and click anywhere in the webpage, the
browser window pixel location where you clicked will be displayed in the text box.
A simple change to the line of code inside the position function as shown below
causes it to display the screen location where you clicked.
document.forms(0).position.value = e.screenX +
" " + e.screenY;
Note: You still have to click inside the browser window. If you click outside the
browser window, the body's onclick event can't see the click event (but the Windows
operating system received it).
| 
Free Downloads
RSS Feed