Java Reference
In-Depth Information
Finally, three seconds later, a third and fi nal image loads, shown in Figure 10-7.
Figure 10-7
When the page loads, the <img> tag has its src attribute set to the fi rst image.
<img src=”AdvertImage1.jpg” name=”imgAdvert” />
Within the <body> tag, you connect the window object's onload event handler to the function
window_onload().
function window_onload()
{
setTimeout(“switchImage()”,3000)
}
In this function, you use the setTimeout() method to start a timer running that will call the function
switchImage() in three seconds. Since you don't have to clear the timer, you haven't bothered to save
the timer ID returned by the setTimeout() method.
The switchImage() function changes the value of the src property of the img object corresponding to
the <img> tag in your page.
function switchImage()
{
currentImgNumber++;
document.imgAdvert.src = 'AdvertImage' + currentImgNumber + '.jpg';
Your advertisement images are numbered from one to three: AdvertImage1.jpg, AdvertImage2.jpg,
and AdvertImage3.jpg. You keep track of the number of the advertisement image currently loaded in
the page in the global variable currentImgNumber, which you defi ned at the top of the script block and
initialized to 1. To get the next image you simply increment that variable by one, and then update the
image loaded by setting the src property of the img object, using the variable currentImgNumber to
build up its full name.
if (currentImgNumber < numberOfImages)
{
setTimeout('switchImage()',3000);
}
}
You have three advertisement images you want to show. In the if statement you check to see whether
currentImgNumber, which is the number of the current image, is less than three. If it is, it means there
