Image Menu: An Image Based Web Menu

The Image Menu applet is a simple program that presents an image-based menu with an arbitrary number of choices in a vertical list, When the user-moves the mouse cursor, over these choices, the one.under the cursor changes appearance, indicating that it can be clicked on. When the user clicks on a choice, the web browser changes to a new document specified for that choice. ImagcMenu was created by David LaVallee, who is a senior scientist at Starwave Corporation. David has created several fun and amazing applets, which he maintains' in an area he calls "Lava Java." He has an unfair advantage in that he was writing VI code in Oak, Java's predecessor.back in 1991. Check out his home page at pictured in Figure 30-1. As you can see, it includes an instance of hnagcMcnu.
Imagclvlcnu uses the showlzocumcntt ) function in ApplelContext to make the hypertext leap to the new pages. The novelty of ImagcMcnu is that it uses different portions of a 'single source image to draw the menu on the screen. Basing a menu on an image rather than on text frees you to design menus that use any font or image you desire. You can also provide various types of selection feedback. You no l0ng need to rely on the AWT's limited rendering functions.

TIle Image Menu applet was inspired by an applet called Navigation, created by top-notch Java programmer Sean Welch. The difference between Navigation and Image Menu is efficiency in bandwidth and applet tag specification. The Navigation applet use¥' source image that s the applet's width times the number of possible selections wide to display all of its states. Both applets download a single image, which is much more efficient over the Internet than loading multiple files. A menu of seven choices for the Navigation applet (100)(140 pixels) would require a source image of 700)(140. The applet described here, Image Menu, uses a source image that is two times the applet width, or 200)(140. Most web designers hate typing when they don't have to, which leads to the second significant difference between Navigation and Image Menu: abbreviated applet parameters.

While Image Menu is many times more efficient, using a smaller source image and fewer bytes of parameters, Welch's Navigation has one inimitable [rait-it can display individually selected "states" that bleed over into the space of the next menu item. The .Image Menu applet requires that each menu item be self-contained in a rectangular area that cannot overlap with adjacent items. This would prohibit, for example, ascending letters (like 1/)from overlapping descending letters (such as J) in the line above.

Share This