HTML and CSS Reference
In-Depth Information
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.
EXAMPLE
13.10
<html>
<head><title>Mouse Events</title></head>
<body bgColor="orange">
1
<a href="#" onMouseOver="document.mouse.src='mouse.gif'">
onMouseOver </a><p>
2
<a href="#" onMouseOut="document.mouse.src='mouse2.gif';">
onMouseOut</a><p>
3
<img src="mousestart.gif" width=300 height=150 name="mouse">
</body>
</html>
EXPLANATION
1
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
.
Continues