Abyss web server - 135Chapter 12Images and Dynamic HTML// off image array
135Chapter 12Images and Dynamic HTML// off image array — set off image path for each button offImgArray[ play ].src = images/playoff.jpg ; offImgArray[ stop ].src = images/stopoff.jpg ; offImgArray[ pause ].src = images/pauseoff.jpg ; offImgArray[ rewind ].src = images/rewindoff.jpg ; // precache all on button imagesvar onImgArray = new Array(); onImgArray[ play ] = new Image(75,33); onImgArray[ stop ] = new Image(75,33); onImgArray[ pause ] = new Image(75,33); onImgArray[ rewind ] = new Image(86,33); // on image array — set on image path for each button onImgArray[ play ].src = images/playon.jpg ; onImgArray[ stop ].src = images/stopon.jpg ; onImgArray[ pause ].src = images/pauseon.jpg ; onImgArray[ rewind ].src = images/rewindon.jpg ; } As you can see in the following HTML, when the user rolls the mouse atop any of the visibledocument image objects, the onmouseoverevent handler (from the link object surroundingthe image in the document) invokes the imageOn()function, passing the name of the particu- lar image. The imageOn()function uses that name to synchronize the document.imagesarray entry (the visible image) with the entry of the in-memory array of on images from theonImgArrayarray. The srcproperty of the array entry is assigned to the corresponding doc- ument image srcproperty. // functions that swap images & status barfunction imageOn(imgName) { if (document.images) { document.images[imgName].src = onImgArray[imgName].src; } } The same goes for the onmouseoutevent handler, which needs to turn the image off by invok- ing the imageOff()function with the same index value. function imageOff(imgName) { if (document.images) { document.images[imgName].src = offImgArray[imgName].src; } } Both the onmouseoverand onmouseoutevent handlers set the status bar to prevent the uglyjavascript:URL (described later) from appearing there as the user rolls the mouse atopthe image. The onmouseoutevent handler sets the status bar message to an empty string. function setMsg(msg) { window.status = msg; return true; } For this demonstration, I disable the functions that control the jukebox. But I leave the emptyfunction definitions here so they catch the calls made by the clicks of the links associatedwith the images.