ImageURLButtonBar Example: Single Image 2

ingle Image 2 Button Bar

Single image button bars are popular because only one button bar image must be created, and they're popular because they tend to initialize faster (only one button bar image file must be loaded over the network). However, just because a single image button bar is simple to create, it doesn't mean that the button bar has to be dull.

The button bar below uses just one image for the entire button bar, but with the ImageURLButtonBar applet, each of the three primary button states (base, mouseOver, and mouseDown) can have a unique look.

Try the button bar below by moving your mouse over the buttons and clicking on the buttons (clicking on the buttons will not cause a URL to load in this example).

If the Java class files and the image files are located in the same directory as the HTML, then the complete applet tag would be defined as illustrated below. Click on the PARAM name for detailed information about the parameter.

The original image file that the applet bases all of the button states on is shown below:

Button Bar Image: HButtonBar.GIF

otes on the Applet Parameters


	The height and width values in the applet tag correspond to the height and width of the "base" image (HButtonBar.GIF).

	The same GIF file was specified for the `base` parameter, the `mouseOver` parameter, and the `mouseDown` parameter. Using the same image for all three parameters does not mean that the image is loaded three times: it simply means that the image is loaded once by the applet, then used three times. The benefit of specifying the same image for multiple button states is that it prevents the applet from synthesizing the missing image files. For example, if the `base` image was specified, but a `mouseOver` was not, then the applet would default to using the `base` image for the `mouseOver` image and creating a grayscale version of the image for the base button bar. By specifying the same image for both button bars, we prevent the applet from creating the grayscale image.

	The base button bar image is created using the `baseBrighten` and the `baseBrightenTint` parameters. The original base button bar image (HButtonBar.GIF) is tinted with a very light blue color, then dimmed by using a negative value for the `baseBrighten` parameter. The reason that the image is dimmed is that by using a very light color as a tint, the tint color lightens (or brightens) the entire original button bar image. In using a negative value for the `baseBrighten` parameter, we reduce the brightness and give the image a worn, faded look.

	The mouseDown button bar image is created using the `mouseDownBrighten`, the `mdBrightenTint`, and the `mdBrightenAll` parameters. The button bar is tinted with a purple color using the `mdBrightenTint` parameter, then brightened a bit using the `mouseDownBrighten` parameter. The `mdBrightenAll` parameter is needed because if button borders are drawn for the mouseDown buttons, then by default the `mouseDownBrighten` and the `mdBrightenTint` parameters are ignored unless the `mdBrightenAll` parameter is set to `true`.

	The disableBadURL parameter is used so that you can click the buttons without having a page load over the example. Normally you would want to specify URLs for the buttons and omit the disableBadURL parameter.