HTML and CSS Reference
Figure 13.10 Links and mouse events.
The onMouseOver and onMouseOut event handlers are commonly used to create a roll-
over, an image that is replaced with a different image every time the mouse moves over
a link or image. (See section “A Simple Rollover with a Mouse Event” on page 432 in
Chapter 12.) In the following example, if the user touches the first link, the picture of
the first mouse will be replaced with a new picture, giving the illusion that the mouse's
eyes are moving.
<a href="#" onMouseOver="document.mouse.src='mouse.gif'">
<a href="#" onMouseOut="document.mouse.src='mouse2.gif';">
<img src="mousestart.gif" width=300 height=150 name="mouse">
The onMouseOver event handler is assigned to a deactivated link (# causes the link
to be inactive). When the mouse rolls onto the link, the event is triggered, and a
new image called mouse.gif will replace the original image, mousestart.gif .