"use strict";

document.addEventListener$("$DOMContentLoaded$",()=>\{$

const images $=$ document.querySelectorAll$("$#image$\_$rollovers img"$)$;

$//$ process each img tag

for $($let image of images$)\{$

const oldURL $=$ image.src;

const newURL $=$ image.id;

$//$ preload rollover image

$//$ set up event handlers for hovering an image

image.addEventListener$("$mouseover$",()=>\{$

image.src $=$ newURL;

$\})$;

image.addEventListener$("$mouseout$",()=>\{$

image.src $=$ oldURL;

$\})$;

$\}$

$\})$;

Assignment $3$ Part $1$: Preload images and use a timer

In this assignment, you$$ll modify an Image Rollover application, so it preloads the images that are displayed when the original images are rolled over. In addition, you$$ll create timers that cause the rollover images to be displayed when the page is first loaded.

$1.$ Open the starter folder attached $($zipped$)$ to this Assignment folder:

Evaluations$\backslash$Assignments$\backslash$Assignment $3\backslash$Assignment$3-$Files.zip $->$ rollover

$2.$ Run the application and move the mouse pointer over each of the two images to see that the original image is replaced with another image when the mouse is in the image.

$3.$ Add JavaScript code to preload the rollover images. These are the images that are specified by the id attributes of the img elements.

$4.$ Add a timer that causes the rollover images to be displayed one second after the page is loaded.

$5.$ Add another timer that causes the original images to be displayed again two seconds after the page is loaded.

$6.$ In index.html$,$ change the text in the tag to your name and student number.