HTML and CSS Reference
In-Depth Information
EXPLANATION
(
CONTINUED
)
2
The
onMouseOut
event handler is assigned to another deactivated link, this time
with another image of the mouse. When the mouse rolls away from the link, the
event is triggered, and a new image called
mouse2.gif
will replace the last image,
mouse.gif
. By rolling the mouse back and forth, the mouse's eyes seem to move.
The words “
hi
” and “
bye
” also keep changing.
3
This is the original image that is displayed before the links are touched. See Figure 13.11.
Figure 13.11
Original display (left), as the mouse moves over the link (middle), and
as the mouse moves away from the link (right).
By using a timer with an event, you can do all sorts of fun things with images. You can
create scrolling banners, rotating billboards, button rollovers, and more. Example 13.11
is a simple slideshow. Four images are preloaded and each image is assigned to an array
element. When the user moves the mouse onto one of the pictures, a new picture will
replace the previous one every 2 seconds, and when he or she moves the mouse away
from the image, the show stops. Any time the mouse moves over the image, the show
starts again.
EXAMPLE
13.11
<html>
<head><title>The Four Seasons</title>
<script type="text/javascript">
1
var season = new Array();
2
var indx = 0;
3
var timeDelay=2000;
