HTML and CSS Reference
In-Depth Information
EXPLANATION
(
CONTINUED
)
8
When the mouse is moved away from the link, the initial image
baby1.jpg
will re-
appear on the screen.
9
The initial external image called
baby1.jpg
is named
willy
and is aligned on the left
side of the screen. The output is shown in Figure 12.13.
Figure 12.13
Before the mouse rolls over the image (left), as the mouse hovers over
the image (middle), and when the mouse moves away from the image (right).
By using the
Math
object's
random()
method, it is sometimes fun to randomly generate
pictures from a list of images. Example 12.7 demonstrates how to change the
src
attri-
bute of an
image
object by using a random number as the index of an element in an
image array. All of the images are preloaded by using the
Image()
constructor, greatly
improving the time it takes to load the images.
EXAMPLE
12.7
<html>
<head><title>Preloading Images</title></head>
<script type="text/javascript">
1
ImageHome=new Array(3);
2
for(var i=0; i<3; i++){
ImageHome[i]=new Image();
}
3
ImageHome[0].src="baby1.jpg";
ImageHome[1].src="baby2.jpg";
ImageHome[2].src="baby3.jpg";
4
function myRandom(){
5
var n=ImageHome.length - 1;
6
var randnum=Math.floor(Math.random() * (n + 1));
7
document.images["display"].src = ImageHome[randnum].src;
}
</script>
