Inside the Image Object
In this chapter, you’ll learn to use the Image object through an examination of two examples: the enhanced menu and the illustrated catalog. There are some good reasons why the animation application isn’t particularly wonderful; I’ll dish you that dirt towards the chapter’s close.
Let’s begin, though, with a look at creating an enhanced menu.
Glitz with Ease: Enhanced Menus
As simple and straightforward as text hyperlinks are, many Web designers prefer to add graphical menus to their pages. A common graphical menu, like the one shown here for instance, consists of a series of adjacent images. The user clicks one of these images, which presumably leads to some further activity.
A typical button menu, composed of several adjacent images.
The enhanced button menu, which highlights each button as the mouse pointer passes over it. Note the change in border thickness and the minor spotlight effect on the selected button. Slick!
Picture a Web page that contains an image of a dog. The image has been specified in the HTML code in typical fashion:
Thus, to alter the image that appears in the dog’s place, you could change the order of the images in this way:
Often, you don’t include the NAME attribute in the <IMG> tag. However, you can do so, thereby giving the image an internal reference name:
Important note: If the image is defined within a form, and you want
to refer to it by name, you must specify
Ready to Code!
The Web page will be a mock clothing catalog. Its main page features a menu of four adjacent images: Help, Shirts, Hats, and Ties. Suppose you’ve saved these images as button1a.jpg, button2a.jpg, button3a.jpg, and button4a.jpg.
When designing these images in your image processing software, you also created “highlighted” versions of each image. Each highlighted version has a higher brightness level, a black border, and a spotlight effect (thanks to Adobe PhotoShop!). Suppose these highlighted images are saved as button1b.jpg, button2b.jpg, button3b.jpg, and button4.jpg.
Each of the menu images you’ve prepared for this page. No great artistic skill necessary!
Simple enough? Basically, yes, although there is one trick to point out. MouseOver and MouseOut events cannot be triggered for standalone images. Rather, they apply only to hyperlinks and to defined areas in an image map (the latter of which is too complicated for this book). The trick: for each image, create a hyperlink that has no text and insert the <IMG> tag within the hyperlink definition. It might look like this:
The above HTML code creates a hyperlink that consists only of the specified <IMG> and leads to “help.htm.” If you do not want the image to link anywhere, you can simply include a null href, as in:
Using this trick, you can trigger MouseOver and MouseOut events when the mouse pointer passes over the image!
Taking that into account, the full HTML code for your page would look quite a bit like this:
In the second half of the statement, you simply assign a string to the Image object, which represents the correct file name for the un-highlighted button, as in “button2a.jpg.”
Now for select():
Hmm, sure looks familiar. In fact, select() is virtually the same function as unselect() except that it assigns the “b” file name to the Image object, as in “button2b.jpg.”
Thus, to change button one to its un-highlighted image, you simply need to call unselect(1). To highlight it, you call select(1). And that is exactly the logic behind this expression:
Slick: Illustrated Catalog
The Image object can also be used to change an image based upon user selection in a form. For instance, consider the Necktie Shopping page offered by Kiwi Republic, in which a selection box displays a list of available necktie styles. When the user selects any one style, its image appears on the right side of the page.
By and large, the basic concepts of this example remain unchanged from the enhanced menus. You begin your work by gathering the collection of necktie images to use. In this case, you’ve acquired five images, each of the same dimensions, with the file names tie0.jpg, tie1.jpg, tie2.jpg, and so on.
Next, you create the HTML code for the selection box form. Using this form, the user will select which tie to view.
In the previous script, you created the form and named it tieform. You then defined the selection box with the name tiebox, and you specified each necktie option. Following the selection box definition, you placed the initial necktie image and named it tiephoto. Because Plain Jane is the initially selected item (<option selected>Plain Jane), tie0.jpg will be the initial image displayed.
This is a mere two-statement function. In the first, you determine which item is currently selected. You do this by assigning the selectedIndex property of tiebox to the variable tieidx. Next, you use tieidx to construct the file name of the necktie image to assign to the src property of the tiephoto Image object. Making this assignment causes the tie image to change to reflect the currently selected item (see the following figure). Voila[ag]!
Capitalizing on the Image object, you change the necktime image that’s displayed to match the item selected in the form.
Here’s a complete rendition of the page’s code:
At the outset of this chapter, I implied that the Image object could be used to create animations. After having seen the Image object in action, you can probably imagine how an animation would be constructed:
It certainly works, but there are some real drawbacks. For one, the result isn’t much different from a typical animated GIF. What’s more, with an animated GIF, all the frames are stored in one file, which cause much less network delay than loading each individual image file does.
The Least You Need to Know
For comments or technical support for our books and software, select Talk to Us. © 1997, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon & Schuster Company.
To order books, call us at 800-716-0044 or 317-228-4366.
© 1997, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon & Schuster Company.