Mouse Hunt - JavaScript

This may be news to you, but JavaScript comes with a powerfuland flexible event model, one which provides developers with astandardized way of trapping and handling client-side events likekeystrokes and mouse clicks. This two-part article takes an in-depthlook at how this event model works, demonstrating some practical (andnot-so-practical) uses of the most common event handlers.

TABLE OF CONTENTS:

By: Team Melonfire, (c) Melonfire

Poor Best

Rating:

/ 36

June 25, 2002

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

JavaScript also defines event handlers for mouse movement, allowing you to do things as the mouse pointer moves over your Web page. The simplest - and most overused - example of this has to be the image swap, which involves changing an image when the mouse moves over it, and switching it back to the original when the mouse moves away from it.

Here's an example - whenever the mouse moves over the image "normal.jpg", it swaps into "hover.jpg", and back into "normal.jpg" once the mouse moves away from it.

<html>
<head>
</head>
<body>
<a href="http://somedomain.com"
onMouseOver="javascript:document.myimage.src='hover.jpg'"
onMouseOut="javascript:document.myimage.src='normal.jpg'">  <img
name="myimage" src="normal.jpg">  </a> </body> </html>

Note that the event handlers must be attached to the hyperlink, not to the image enclosed within it - this is one of the most common errors newbies make.

Here's another example, this one demonstrating the onClick handler, which is triggered when the user clicks on a hyperlink:

<html>
<head>
</head>
<body>
<a href="http://somedomain.com"
onClick="window.open('http//www.someotherdomain.com/ad.jpg', 'new')">
<img name="myimage" src="normal.jpg">  </a> </body> </html>

In this case, when the user clicks the link, not only does the browser attempt to connect to the specified resource, it also pops open a new browser window (displaying a different resource) via the onClick event handler.

Next: Forty Two >>