Slideshow
The following example is a simple slideshow that uses the onMouseOver and onMouseOut events. Four
images are preloaded and each image is assigned to an a
ay 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. An explanation of each part of code appears below and all files are provided for
you to download and review and use in the creation of your own slideshow.
Review the Code below and the Explanation that follows on Page 2.
Line 10. As opposed to linking to an external javascript file, we are embedding the javascript in the HTML file
ecause it makes sense to do so in this application.
Line 11. A new A
ay object called season is declared.
Line 12. A global variable called indx is declared and initialized to 0.
Line 13. The value 2000 is assigned to a global variable called timeDelay. 2000 milliseconds = 2 seconds.
Lines 15, 17, 19, 21. The Image() constructor preloads and caches the images. Each new image object is assigned to
an element of the season a
ay.
Lines 16, 18, 20, 22. The first element of the season a
ay gets a new Image object. The src property (the location
and name of the image) is winter.jpg, located in the present working directory.
Lines XXXXXXXXXXA user-defined function called changeSeason() is defined. It is called when the onMouseOver event
handler is triggered by the user moving the mouse onto the image. Its purpose is to replace one image with
another image in the season a
ay, every 2 seconds, for as long as the user’s mouse is on the image.
Line 25. The size of the a
ay is its length-1 because a
ay indexes start at 0. As long as the a
ay size isn’t
exceeded, the index value will increment by 1.
Line 32. This is where image replacement happens. The name of the original image is times (line 48) and it is
eferenced by JavaScript using the DOM hierarchy: document.times.src is assigned a new image from the season
a
ay, season[indx].src. The new image with be displayed.
Line 33. The window object’s setTimeout() method will be set to call the changeSeason() function every 2000
milliseconds (2 seconds). Every 2000 milliseconds a new image is displayed as long as the user keeps the mouse on
the image.
Lines XXXXXXXXXXThe user-defined function called stopShow() is defined. It is called when the onMouseOut event is
triggered by the mouse moving away from the image. It turns off the timer, stopping the slideshow.
Line 36. The setTimeout()method is cleared.
Lines XXXXXXXXXXThe link has two mouse event handlers, onMouseOver and onMouseOut. The pseudo URL,
JavaScript:void(null), deactivates the link and ensures that if there is a return value from the event, it will be
nullified. Because neither of the events returns anything, it suffices to use the protocol as JavaScript.
Directions
1. Download and review the seasons.html, winter.jpg, spring.jpg, summer.jpg, and fall.jpg files.
Based on your understanding of the seasons.html file, create an HTML5 file that contains
JavaScript needed for a slideshow that contains 5 images. Save the file as slideshow.html and
store it in your Ch08 directory along with the 5 images chosen for your slideshow. The
slideshow.html file must be free of e
ors and validated. Your images must be socially
acceptable and comply with acceptable student behavior and computer use policies at NVCC. (8
Points)
2. Your slideshow file must meet the following specifications (40 Points Total as
oken down
elow):
a. Include the JavaScript in the Head section of the HTML file (3 Points).
. Declare a new A
ay object with any name other than season. (4 Points)
c. A global variable is declared and initialized to 0. Use any name other than indx. (3 Points).
d. A global variable is declared and initialized for 3 seconds. Use any name other than timeDelay. (3
Points).
e. Use the Image() constructor to preload and cache your images. Each new image object should be
assigned to an element of your a
ay. You must use 5 images in your a
ay. (4 Points)
f. Associate your 5 images files to the src property for each element of the a
ay. (3 Points)
g. Define a function to be called when the onMouseOver event handler is triggered when the user
moves the mouse onto the image. Name the function anything other than changeSeason(). The
images should cycle as long as the user’s mouse remains on the image. (4 Points)
h. Set up the original image to be replaced from the images in the season a
ay. (3 Points)
i. Make sure that the window object’s setTimeout() method will call the necessary function for
changing the images every 3 seconds. (3 Points)
j. Define a function to be called when the onMouseOut event is triggered by the mouse moving
away from the image. Name the function anything other than stopShow(). (4 Points)
k. Clear the setTimeout() method. (3 Points)
l. Use the pseudo URL, JavaScript:void(null) to deactivate the link and ensures that if there is a
eturn value from the event, it will be nullified. Because neither of the events returns anything, it
suffices to use the protocol as JavaScript. (3 Points)
3. Submit the slideshow.html and your 5 image files into Blackboard. (2 Points)
Helpful Hints: The Chapter 8 epoch.html, utilities.js, and epoch.js files exemplify Event Handling with the
mouse. Moreover, the seasons.html file is absolutely the best resource for understanding how to
complete this assignment.