Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

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.

• 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).