HTML and CSS Reference
In-Depth Information
EXAMPLE
12.7 (
CONTINUED
)
</head>
<body bgcolor="cornflowerblue"><center>
<h2> This Is Baby William</h2>
8
<img name="display"
id="display"
src="baby.jpg"
border=5
width="200" height="250" />
<p>
<form>
9
<input type="button"
value="Click Here for Baby Picture"
10
onClick="myRandom()" /
>
</form>
</center>
</body>
</html>
EXPLANATION
1
The
Array()
constructor creates an
array
object to consist of three elements. This
array will be used to hold three images.
2
The
Image()
constructor will preload and cache three images and assign them to
the array created in line 1.
3
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.
4
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.
5
The variable called
n
is assigned the value of the length of the image array minus 1.
6
The variable called
randnum
is assigned a random whole number between 1 and
3, the value returned from the
Math
object's random method.
7
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-
tially appears in the browser window. In the JavaScript tree, this image is repre-
sented as
document.images[0].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.
8
The inline image, called
baby.jpg
is displayed on the screen when the program
starts. It is named
display
.
9
This form input type creates a button on the screen.
10
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
12.14.
