Javascript slide shjow assignment
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 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. 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 because it makes sense to do so in this application. Line 11. A new Array 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 array. Lines 16, 18, 20, 22. 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 directory. Lines 24-34. A 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 array, every 2 seconds, for as long as the user’s mouse is on the image. Line 25. The size of the array is its length-1 because array indexes start at 0. As long as the array 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 referenced by JavaScript using the DOM hierarchy: document.times.src is assigned a new image from the season array, 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 35-37. The 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 45-49. The 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 errors 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 broken down below): a. Include the JavaScript in the Head section of the HTML file (3 Points). b. Declare a new Array 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 array. You must use 5 images in your array. (4 Points) f. Associate your 5 images files to the src property for each element of the array. (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 array. (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 return 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.