Defining the swap() function in Java

Encoder QR Code 2d barcode in Java Defining the swap() function

The swap() function that you see defined in Listing 8-5 accepts two arguments:

id, which represents the name of the image that you want to swap newsrc, which represents the filename of the new image that you want to display

Here s what s going on inside the body of the swap() function: First, a variable called theImage is created and assigned the preloaded Image object that you want to swap out (To create theImage, the locateImage() function is used I explain the inner workings of locateImage() in the next section) Second, the filename of theImage is changed, which causes the browser to display the new image Image swap complete, as shown here:

function swap(id, newsrc) { var theImage = locateImage(id); if (theImage) { // if an image was found theImagesrc = newsrc; // swap it out } }

If you re interested in how the locateImage() function works, you ve come to the right place As you see in the preceding section, the swap() function uses locateImage() to, well, to locate the image it needs to swap out Here s the code for the locateImage() function:

function locateImage(name) { //Start with a blank variable called theImage var theImage = false; // If there are images defined for this document if (documentimages) { // Assign the image we re looking for to theImage theImage = documentimages[name]; } // If theImage exists, return it to the calling function if (theImage) { return theImage; } // Otherwise, return false (0) to the calling function return (false); }

To perform a rollover, you must swap out images two different times: when a user mouses onto an image, and when a user mouses off again You do this by calling the swap() function from both the onMouseOver and onMouseOut event handlers, as shown in the following Listing 8-5 excerpt:

// Because the image is implemented as a link, clicking // the image automatically loads the prohtm file <A HREF= prohtm onMouseOut= swap( promo_pic , pro_wgif ) onMouseOver= swap( promo_pic , pro_pgif ) > <IMG NAME= promo_pic SRC= pro_wgif WIDTH= 81 HEIGHT= 12 BORDER= 0 > </A>

Notice in this code that the initial value for the E-Promotion image source is pro_wgif (the white button); the name of the image is promo_pic (You know these things because the SRC attribute of the <IMG> tag is set to pro_wgif and the NAME attribute of the <IMG> tag is set to promo_pic) Now take a look at the onMouseOver event handler This statement swaps the promo_pic image from the white version to pro_pgif (the purple version)

When the onMouseOut event handler fires, the promo_pic image changes back again to pro_wgif (back to the white version) Thanks to the HTML <A> tag, when the user clicks the image, the user s browser loads a new Web page devoted to all things promotional: prohtm

HTML areas (and their associated event handlers) let you carve up images into multiple image hotspots, areas of an image that correspond with a message or action (see Listing 8-6) Mousing over the section of the image marked Publish, as shown in Figure 8-10, causes a publishing-related message to appear in the status bar Figure 8-11 shows a similar trick for a different section of the image And, you can designate a larger area for a more general message on the status bar (see Figure 8-12) Note: If you re running Internet Explorer and don t see the status bar, choose View Status Bar

Figure 8-11: Mousing over the section of the image marked Promote causes a promotionrelated message to appear on the status bar