HTML and CSS Reference
EXAMPLE 12.7 ( CONTINUED )
<h2> This Is Baby William</h2>
<img name="display" id="display"
width="200" height="250" />
value="Click Here for Baby Picture"
onClick="myRandom()" / >
The Array() constructor creates an array object to consist of three elements. This
array will be used to hold three images.
The Image() constructor will preload and cache three images and assign them to
the array created in line 1.
The src property of the first element of the image array is assigned an image called
baby1.jpg . Each array element is assigned a different image.
The function called myRandom() is defined. It produces a random number that
will be used as the index into the image array, causing a random picture to be dis-
played on the screen.
The variable called n is assigned the value of the length of the image array minus 1.
The variable called randnum is assigned a random whole number between 1 and
3, the value returned from the Math object's random method.
Instead of using a number to access the image array, a string is used. The string is
the name given to the HTML image defined on line 8. This is the image that ini-
sented as document.images.src or document.display.src or d ocument.images[“dis-
play”].src . Either way, this image will be replaced with the value of the image in
the array ImageHome[randnum].src.
The inline image, called baby.jpg is displayed on the screen when the program
starts. It is named display .
This form input type creates a button on the screen.
When the user clicks the button, the onClick event is fired up, and the event is
handled by calling myRandom() , which displays a random image. See Figure