Working with Images (and Links) - JavaScript by Example - page 429

EXAMPLE 12.4 ( CONTINUED )

12 <a href="JavaScript:next_image()">
View next baby<br />
</a>
13 <a href="JavaScript:previous_image()">
View previous baby<br />
</a>
</div>
</body>
</html>

EXPLANATION
1

The array myImages consisting of four images is created by the Array() constructor.

2 The index value for the array is assigned to a variable called index_val .

3 A function called next_image() is defined. When called, the function will cause

the next image in the array to be displayed.

4 By increasing the value of the index, the next image in the array will be accessed.

5 As long as the end of the array hasn't been reached, the block will be entered and

the new image displayed.

6 The name of the image, babypic , is used as an index into the images[] array to refer-

ence the default image by name. By assigning a new image (from the myImages ar-
ray) to the image's src property, the current image will be replaced by the new image.

7 If the end of the array has been reached, the statements within the else block will

be executed, resetting the array index back to the beginning, index 0.

8 A function called previous_image() is defined. When called, it will go backward in

the array and cause the previous image to be displayed.

9 If the index value is still ≥ 0, we are still within the boundaries of the array.

10 If by subtracting one from the index value, we have ended up with a value of -1,

we are out of the bounds of the array, and will set the index value back to the size
of the array, its length -1.

11 This is the initial image displayed on the screen before the user initiates an action.

12 When this link is clicked, the JavaScript function called next_image() is invoked.

13 When this link is clicked, the JavaScript function called previous_image() is invoked.

See Figure 12.11.