In this exercise, you'll modify an Image Rollover application so it preloads the images that and 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.

Fichinn Tmanes

Open the application in this folder:

ch$07$rollover$$

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.

Add JavaScript code to preload the rollover images. These are the images that are specified by the id

attributes of the img elements.

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

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

loaded.htmL $>$

$(\frac{\text{:}}{p}$:$)$Move your mouse over an image to change it and back out of the

image to restore the original image. $($:$/$p:$)$

$id=$image$\frac{s}{\frac{?}{?}}$bison.$jpg$:

:ch$07>$ rollover $>$ B rollover.cSs $>$ :

body $\{$

font$-$family: Verdana, Arial, Helvetica, sans$-$serif;

font$-$size: $90\%$;

background$-$color: $$ white;

width: $790$px;

margin: $0$ auto;

border: $3px$ solid $$ blue;

padding: $1em$;

$\}$

h$1\{$

color: $$ blue;

margin: $0$ ;

padding: $0$ ;

text$-$align: center;

$\}$

margin: $0$ ;

padding: $.5em0$;

text$-$align: center;

$\}$

ul $\{$

padding$-$left: $0$ ;

text$-$align: center;

$\}$

li $\{$

display: inline;

$\}$Js rollover.js

ch$07>$ rollover $>$ Js rollover.js $>$ document.addEventListener$("$DOMContentLoaded$")$ callback

"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;

$\})$;

$\})$;