HTML and CSS Reference
In-Depth Information
EXPLANATION
5
The first element of the
season
array gets a
new Image
object. The
src
property (the
location and name of the image) is
winter.jpg
, located in the present working di-
rectory.
6
A user-defined function called
changeSeason()
is defined. It is called when the
on-
MouseOver
event handler is triggered by the user moving the mouse onto the im-
age. Its purpose is to replace one image with another image in the
season
array,
every 2 seconds, for as long as the user's mouse is on the image. (It might be nice
to add a little Vivaldi audio clip here to enhance the show!)
7
The size of the array is its length - 1 because array indexes start at 0. As long as
the array size isn't surpassed, the index value will keep being incremented by 1.
8
This is where image replacement happens. The name of the original image is
times
(line 14) and it is referenced by JavaScript using the DOM hierarchy:
doc-
ment.times.src
is assigned a new image from the
season
array,
season[indx].src.
The
new image will be displayed.
9
The
window
object's
setTimeout()
method will be set to call the
changeSeason()
function every 2,000 milliseconds (2 seconds). Every 2 seconds a new image is
displayed as long as the user keeps the mouse on an image.
10
The user-defined function called
stopShow()
is defined. It is called when the
on-
MouseOut
event is triggered by the mouse moving away from the image. It turns
off the timer, stopping the slideshow.
11
The
setTimeout()
method is cleared.
12
The link has two mouse event handlers,
onMouseOver
and
onMouseOut
. The pseu-
do URL,
JavaScript:void(null)
, deactivates the link and ensures that if there is a re-
turn value from the event, it will be nullified. Because neither of the events returns
anything, it would be enough to just use the protocol as
JavaScript:
. The display
is shown in Figures 13.12 and 13.13.
Figure 13.12
Watch the seasons change every 2 seconds.
