JavaScript Examples Bible - UserWorks Technologies

326
IMG.src
JavaScript Examples Bible: The Essential Companion to JavaScript Bible
The page (see Figure 6-1) includes two IMG elements: one that displays noncached
images and one that displays cached images. Under each image is a SELECT
element that you can use to select one of four possible image files for each element.
The onChange event handler for each SELECT list invokes a different function to
change the noncached (loadIndividual()) or cached (loadCached()) images.
Both of these functions take as their single parameter a reference to the form that
contains the SELECT elements.
To cycle through images at five-second intervals, the checkTimer() function
looks to see if the timer check box is checked. If so, the selectedIndex property of
the cached image SELECT control is copied and incremented (or reset to zero if the
index is at the maximum value). The SELECT element is adjusted, so you can now
invoke the loadCached() function to read the currently selected item and set the
image accordingly.
For some extra style points, the tag includes an onUnload event handler
that invokes the resetSelects() function. This general-purpose function loops
through all forms on the page and all elements within each form. For every SELECT
element, the selectedIndex property is reset to zero. Thus, if a user reloads the
page, or returns to the page via the Back button, the images start in their original
sequence. An onLoad event handler makes sure that the images are in sync with the
SELECT choices and the checkTimer() function is invoked with a five-second delay.
Unless the timer check box is checked, however, the cached images don’t cycle.
Listing 22-4: A Scripted Image Object and Rotating Images
Image Object
// global declaration for ‘desk’ images array
var imageDB
// pre-cache the ‘desk’ images
if (document.images) {
// list array index names for convenience
var deskImages = new Array(“desk1”, “desk2”, “desk3”, “desk4”)
// build image array and pre-cache them
imageDB = new Array(4)
for (var i = 0; i < imageDB.length ; i++) {
imageDB[deskImages[i]] = new Image(120,90)
imageDB[deskImages[i]].src = deskImages[i] + “.gif”
}
}
// change image of ‘individual’ image
function loadIndividual(form) {
if (document.images) {
var gifName = form.individual.options[form.individual.selectedIndex].value
document.thumbnail1.src = gifName + “.gif”
}
}
// change image of ‘cached’ image
function loadCached(form) {
if (document.images) {