Week $08$ Instructions

This week's assignment focuses on using JavaScript to handle interactions with images.

You will be working on with the website files provided in the file IT$3240\_$Wk$08\_$Rev.zip.

Please extract all of the files from the zip file, open the folder in your IDE, and study the

existing code. You will be working on the JavaScript for the index.html page and the

gallery.html page.

Keep all JavaScript in the specified $.$js files in the js subdirectory. There should not be any

JavaScript $($or CSS$)$ in the HTML$.$

Be sure to document the JavaScript that you add with comments.

Index Page $-$ Steps:

$1.$ Open the index.html file and the js$/$image$.$switcher.js file.

$2.$ Study the existing HTML and note the elements used. The HTML displays the first image

to avoid a broken image icon. The images that the JavaScript for the page needs to cycle

through are images$/$banner$1.$jpg$,$ images$/$banner$2.$jpg$,$ and images$/$banner$3.$jpg$.$ Each

image will take the place of the existing image displayed by the HTML $($don$\text{'}$t add more

images to the page$).$

$3.$ In the JavaScript file $($js$/$image$.$switcher.js$)$ add a function that will preload the images.

The function that preloads the images should include a parameter that allows passing the

list of images to the function as an array. There should not be any specific file names "hard

coded" in the function.

$4.$ In the same JavaScript file, write a function that handles the switching of the image every

$3$ seconds.

$$ This can be done a couple di$[$erent way:

o Using setTimeout$()$ at the end of the switching function to call the switching

function recursively

o Using setInterval$()$ called from the window.onload function $($see below$)$ to

invoke the switching function at regular intervals. $($This is probably the easier

approach.$)$

$5.$ Preview the page in a browser. Get screen shots showing the switching through the $3$

images and put the screen shots in a Word document. Add captions$/$notes identifying each

image.

Gallery Page $-$ Steps:

$1.$ Open the gallery.html page and study the HTML$.$ Preview the page in a browser and note

how the existing CSS handles things when the mouse hovers over an image. As CSS has

developed, it has taken over a number of interactions that used to be possible on with

JavaScript. There are still many interactions that CSS can't handle, so this is where

JavaScript comes in$.$

$2.$ In the HTML$,$ note the following section, since it will play a key role in this part of the

assignment: