HTML and CSS Reference
In-Depth Information
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-
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!)
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.
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.
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.
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.
The setTimeout() method is cleared.
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.
Search WWH ::

Custom Search