ModernJava
http://www.modernminds.com
I nternet Explorer® Mock-up Example

In order to give you an idea of the power of the ImageURLButtonBar applet, we've simulated the buttons found in Microsoft Internet Explorer®.

Try out the functional button bar below (clicking on the buttons will not cause anything to happen in this example), then read on to find out how the simulation was created.

Note: In this example only the buttons function. The menus, text entry field, et cetera are not operational.

Netscape Users: Navigator 3 seems to have a problem with the color pallets in GIF files (the problem appears to be fixed in Navigator 4). If the colors in the applet below look dithered, try the alternate version (and read the explanation).
To create this button bar, the first step was to create the images to be used for the button bar background and the button states.

A screen capture program was used to capture the Internet Explorer background image. The button area on the image was then replaced with a plain gray using Adobe Photoshop.


Button Bar Background Image: IEBackground.GIF

Photoshop was then used to remove the button images for the "base" and "mouseOver" button states for each button.


Button Bar Base Image: IEBase.GIF


Button Bar MouseOver Image: IEMouseOver.GIF

Finally, the applet tag entered in the HTML file.

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.

<APPLET CODE="ImageURLButtonBar.class" WIDTH="321" HEIGHT="156">
<PARAM NAME="base" VALUE="IEBase.GIF">
<PARAM NAME="mouseOver" VALUE="IEMouseOver.GIF">
<PARAM NAME="background" VALUE="IEBackground.GIF">
<PARAM NAME="barXPos" VALUE="18">
<PARAM NAME="barYPos" VALUE="44">
<PARAM NAME="buttonBorders" VALUE="other">
<PARAM NAME="downShift" VALUE="true">
<PARAM NAME="disableBadURL" VALUE="false">
<PARAM NAME="button1Start" VALUE="0">
<PARAM NAME="button1Size" VALUE="50">
<PARAM NAME="button2Start" VALUE="50">
<PARAM NAME="button2Size" VALUE="50">
<PARAM NAME="button3Start" VALUE="100">
<PARAM NAME="button3Size" VALUE="50">
<PARAM NAME="button4Start" VALUE="150">
<PARAM NAME="button4Size" VALUE="50">
<PARAM NAME="button5Start" VALUE="200">
<PARAM NAME="button5Size" VALUE="50">
<PARAM NAME="button6Start" VALUE="250">
<PARAM NAME="button6Size" VALUE="50">
</APPLET>
otes on the Applet Parameters
The height and width values in the applet tag correspond to the height and width of the background image (IEBackground.GIF).
The barXPos and barYPos parameters are used to position the top left corner of the base image (IEBase.GIF) and the mouseOver image (IEMouseOver.GIF) on the background image (IEBackground.GIF).
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.
Internet Explorer and Microsoft Internet Explorer are registered trademarks of Microsoft Corporation.

Copyright © 1997 by Modern Minds, Inc.