HTML and CSS Reference
In-Depth Information
By changing the value assigned to the
src
property of an image, it is possible to dynam-
ically replace one image with another. You can create an array of images with the
Array()
constructor, and assign any one of these images to the
src
property of the JavaScript
images[]
array.
EXAMPLE
12.4
<html>
<head><title>HTML Images</title>
<script type="text/javascript">
1
var myImages=new Array("baby1.jpg", "baby2.jpg",
"baby3.jpg", "baby4.jpg");
2
index_val=0;
3
function next_image(){
4
index_val++;
5
if (index_val < myImages.length){
6
document.images["babypic"].src = myImages[index_val];
//
could say document.babypic.src or
//
document.images[0].src
}
7
else{
index_val=0;
document.images["babypic"].src = myImages[index_val];
}
}
8
function previous_image(){
index_val--;
9
if (index_val >= 0){
document.images["babypic"].src = myImages[index_val];
}
10
else{
index_val=myImages.length - 1;
document.images["babypic"].src = myImages[index_val];
}
}
</script>
</head>
<body>
<div align="center">
<h2>Baby Gallery</h2>
11
<img name="babypic"
id="babypic" src="baby1.jpg"
width="329" height="440"
>
<br />
