ImageURLButtonBar - Creating Images

reating Images for Buttons

The ImageURLButtonBar can support as many as five different images for button states: a "base" image, a "mouseOver" button image, a "mouseOver2" button image (for animation), a "mouseDown" image, and a "buttonsDisabled" image.

The basics of creating ImageURLButtonBar button images can be summarized as follows:

	ImageURLButtonBar creates buttons based on images in a GIF or JPEG file (one GIF or JPEG file is required for each user designed button state -- see How the Applet Creates Button Images for information on applet created images).

	*The button images in each image file are arranged in a single* strip (either horizontal or vertical).**

	The position of each button in a button bar must be identical for each image file that is created (i.e., for each button state).

	Each button bar image file must be exactly the same size.

An example should clarify this:

Suppose we wish to create a horizontal button bar with two unique images for each button. One image will be used for the "base" image, and the other image will be used when the mouse is moved over a button (the "mouseOver" image). Note that images for other buttons states will be created automatically by the applet.

The "base" image we create is:

and the "mouseOver" image we create is:

The resulting button bar is shown below. (Try it! The URLs are disabled so clicking a button will not cause another page to be loaded.)

Notice that each button ("Home," "Java," etc.) is in exactly the same position on each bar, and that each bar is exactly the same size. These are the two key points to remember when creating your own button bars.

ips for Creating Button Bars

	You can leave spaces between buttons (they don't have to be edge-to-edge) as long as each button is at the same exact location on each button bar image you create.

	A simple way to create multiple button bars for different button states is to create the base bar first, then make a copy of the bar for each additional button state. You can modify the button bar copy and give it a different "look" for the intended button state without having to worry about lining the buttons up on each bar.

	A graphics program that supports layers such as "Adobe Photoshop" can make it easy to create button bars. First create a background layer for your button bar. This will be the texture or image that the buttons will sit on. Next create an additional layer for each button bar that you plan to create for individual button states. Create your "base" button bar buttons first and position them as the should appear over the background layer. You can create buttons for the other button bar layers and position them using the position of the "base" buttons for reference. Now all you need to do for each button bar is hide the other button bar layers, then flatten the layers (make sure that you save a copy of the file so that you can go back and do this for each button bar that you will create), and finally save the image in GIF or JPEG format.