CD-112 Part II . JavaScript Tutorial As the page loads, it executes several statements immediately. These statements create four new memory image objects and assign filenames to the objects src properties. These images are loaded into the image cache as the page loads. Down in the Body portion of the document, an ![]()
tag stakes its turf on the page and loads one of the images as a starting image. A SELECT element lists user-friendly names for the pictures while housing the names of image objects already precached in memory. When the user makes a selection from the list, the loadCached()function extracts the selected item s value which is a string version of the image object name. To convert a string name to a reference to the object of that same name, use the eval() function (part of the core JavaScript language). You need the src property of that object, so the eval() function is applied to a string version of the reference to an image object s src property. The src property of the chosen image object is assigned to the src property of the visible image object on the page, and the precached image appears instantaneously. Creating image rollovers A favorite technique to add some pseudo-excitement to a page is to swap button images as the user rolls the cursor atop them. The degree of change to the image is largely a matter of taste. The effect can be subtle a slight highlight or glow around the edge of the original image or drastic a radical change of color. Whatever your approach, the scripting is the same. When several of these graphical buttons occur in a group, I tend to organize the memory image objects as arrays and create naming and numbering schemes that facilitate working with the arrays. Listing 12-2 shows such an arrangement for four buttons that control a jukebox. The code in the listing is confined to the image- swapping portion of the application. This is the most complex and lengthiest listing of the tutorial, so it requires a bit of explanation as it goes along. Listing 12-2: Image Rollovers
Jukebox/Image Rollovers