Understanding The JavaScript Event Model (part 1) - Mouse Hunt (Page 5 of 9 )
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 >>
More JavaScript Articles
More By Team Melonfire, (c) Melonfire
/ 35 
