Graphics Muse

More...

...XeoMenu (continued)

This first example shows the basic workings of XeoMenu. Note that when you place the mouse over either word in the image it changes colors and shifts slightly in position. The latter was originally just a typo but I liked it the effect so much I left it in. The "Linux" text also provides a drop down menu when you place your cursor over it. The menu contains two simple entries. Moving the mouse over either entry would take you to another page (although the links in this source are fictitious - they don't really exist).

The applet code for this first example looks like this:

<APPLET CODEBASE="." CODE="XeoMenu" WIDTH=150 HEIGHT=200>

<PARAM NAME=author value="Patrick Chan. www.xeo.com">

<PARAM NAME=bg-color value="206 114 28">

<PARAM NAME=image VALUE="./gx/hammel/xeomenu-1.gif">

<PARAM NAME=separator VALUE="|">

<PARAM NAMe=newline VALUE="^">

<PARAM NAME=font VALUE="Helvetica">

<PARAM NAME=font-height VALUE="18">

<PARAM NAME=marginh VALUE=2>

<PARAM NAME=marginv VALUE=2>

<param name=fg-menu-color value="0 0 0">

<param name=bg-menu-color value="206 114 28">

<param name=fg-hi-menu-color value="232 221 18">

<param name=bg-hi-menu-color value="206 114 28">

<PARAM NAME=menu1
VALUE="0 101 150 100|151 101 150 100|0 101|d|/nav/new/index.html">

</APPLET>

We'll step through these one time to explain briefly what each line does. The first line starts the applet code and establishes the current directory (the one from which this page was taken) as the location for the applet code. The CODE argument gives the name of the Java program. Note that you don't have to include the ".class" extension (all Java programs, once compiled, have a .class extension in the filename). The width and height arguments give the dimensions in which the applet will live in the page. Note that this code was placed right after a table, inside the BODY section of the HTML document. After this line come the set of applet parameters, each of which is specified using the HTML PARAM tag.

The next two lines give the copyright and program author, giving credit to Sun Microsystems and Patrick Chan for this code. Sun paid Xeo for its development, I believe, for use on the Java Web site.

The next line gives a background color to use in the transparent regions of the image. This particular example does not have any transparent areas, however the next one does.

The image to use is specified with the image parameter line. The VALUE can be any valid URL.

The seperator is a single character used to delimit fields in the menu parameters. The menu parameters are the last two PARAM entries which we'll cover in a moment. For now, just note that the seperator is used in the VALUE argument for the menu parameters.

Menu items can have multiple lines using this program. In order for XeoMenu to recognize a line break, the text uses a caret (^) to denote a newline. These are not used in these examples, but the caret would be embedded in the menu text in the menu parameters.

The next two lines specify the font and font height to use for the menu text. According to the man page for XeoMenu there are only 3 possible font types: Helvetica, TimesRoman, and Courier. This is probably a limitation in the early Java class libraries, but I'm not certain of that.

Marginh and marginv are used to pad the region around the menu text with empty space. The values are given in pixels.

Now come the text color parameters. First are the foreground and background colors to use for the text when the cursor has not been moved over the text, ie the default text colors. The latter two specify the colors to use when the cursor is placed over a menu entry. Note that in the first example the background colors are the same but the foreground colors are changed. This isn't a recommended method - the results are somewhat unappealing - but it does give you an idea of how the colors can provide variations of effects.

The last line before the two menu parameteers is actually commented out, but is given for the sake of completeness. This parameter is recognized by XeoMenu as the frame to display a menu items targe URL if it is selected.

Finally, we have the two menu parameters. XeoMenu recognizes any parameter prefixed with the word "menu" and suffixed with a numeric value as a menu item. This parameters value field contains a set of seperator delimited values that define the display location, contents, and URLs for each menu. The first set of 4 numbers is the hotspot. This is the region, specified by an x,y location and its width and height, in which the mouse must enter for XeoMenu to begin handling the menu features of the image. The next 4 numbers specify a secondary region of the image to overlay on the image when the mouse enters the hotspot. The next two numbers specify the offset into the image to place the overlay. In this example the offsets are specified so the overlay is place over the hotspot, blotting it out as it were. This is not the only way to use this feature, since the overlay can be placed anywhere on the image. Note that all of the x,y coordinates are given as pixel coordinates in the image.

After the offset comes a single character. This can either be a "d" or a "u". The "d" is used to post menus in a downward direction and the "u" draws them upward. The location of the upper left corner for the downward menus (and the lower left corner for upperward menus) is also the offsets specified for the overlay location (ie the two numbers that preceeded the "d" or "u").

Next comes the default URL. This is the URL that will be used if the user simply clicks in the hotspot without actually using a menu. After this comes the menu definitions. These are the text of the menu entries paired with a URL that follows immediately after it. Note that in the second menu parameter there is only one URL specified - the default URL. That means that no drop down menus are displayed when you place the mouse over the Gazette hotspot, but the overlay is still used.

In this next example, both regions of text use menus. One uses an upward menu and the other uses an overlay that is not directly over the original hotspot. Also, this image has a transparent region. Can you guess how to create this example? Try it first, before looking at the source code.