HTML and CSS Reference
In-Depth Information
Figure 13.10 Links and mouse events.
13.4.2 Mouse Events and Images—Rollovers
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
 
Search WWH ::




Custom Search