Images, both static and dynamic, appear on most Web sites. There are many different features and functionalities that we can add through the use of JavaScript, including preloading, rollovers, and cycling banner ads. In this assignment, you will work with JavaScript, images, events, and manipulating the DOM to create an interactive image gallery.

Hint: Preloading your images will only work on a hosting server and not your local drive, as there is no load time for your images locally. Once you have preloaded those images, you should clear your cache to test your loading of the images again.

Tip: In a smaller JavaScript program such as this one, each function is created for a specific purpose. However, in more complex sites, it is better to build functions that are applicable to multiple situations. For example, rather than specifying an element name or ID, we can use a variable that is passed into the function.

Directions

Use the gallery.html and index.html files from the supplied course Zip file. Create functionality using JavaScript on the following pages:

index.html

Preload the images (banner1.jpg, banner2.jpg, and banner3.jpg in the images folder) for the banner at the top of the page.Create a cycling two-state banner that cycles every three seconds.

gallery.html

Preload the gallery images.Create roll-over functionality for each of the thumbnails in your image gallery. Use appropriate images found in the images folder.Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery.

Make sure to do the following:

Create an onpageload function to preload all of your images.Create a modularized function to cycle the homepage banner.Create a modularized rollover function for gallery images.Once completed, view your pages in each of your two selected Web browsers to see if the content renders appropriately and consistently within each. Next, verify that your code is error free using the appropriate browser specific development tool found in the Resources.Take a screen capture of each of your validation results and save it for submission.

Note: Modularized refers to creating components that can be repurposed without significant changes to coding. Modularized components have no "hard coding" of image names, URLs, and so on, in the functions. Samples of modularized and nonmodularized JavaScript are provided in the Example Code file linked in Resources.