riple Image Button Bar This vertically oriented button bar example uses three different image files for button states. The "base" image is displayed when the mouse is not within the boundaries of a button. The "mouseOver" image is displayed when the mouse is moved within a button's boundaries. In this example, the "base" image is reused as a "mouseOver2" image to enable an animated effect while the mouse is over the button. Finally, a "mouseDown" image is displayed when the mouse is clicked on a button. Try 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). Notice that the text in the browser's status bar changes as the mouse is moved over each button.
	The user created button bar images for this example are shown below:
	The first image (DemoBar2a.GIF) is used for the "base" image and also for the "mouseOver2" image, the second image (DemoBar2b.GIF) is used for the "mouseOver" image (alternated with the "mouseOver2" image), and the third image is used for the "buttonDown" image. The button borders are generated automatically by the applet based on applet parameters. 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="70" HEIGHT="75"> <PARAM NAME="base" VALUE="DemoBar2a.GIF"> <PARAM NAME="mouseOver" VALUE="DemoBar2b.GIF"> <PARAM NAME="mouseOver2" VALUE="DemoBar2a.GIF"> <PARAM NAME="mouseDown" VALUE="DemoBar2c.GIF"> <PARAM NAME="buttonBorders" VALUE="all"> <PARAM NAME="borderSize" VALUE="2"> <PARAM NAME="downShift" VALUE="true"> <PARAM NAME="downShiftAmt" VALUE="1"> <PARAM NAME="disableBadURL" VALUE="false"> <PARAM NAME="button1Start" VALUE="0"> <PARAM NAME="button1Size" VALUE="25"> <PARAM NAME="button1Desc" VALUE="Return to Home Page"> <PARAM NAME="button2Start" VALUE="25"> <PARAM NAME="button2Size" VALUE="25"> <PARAM NAME="button2Desc" VALUE="Retrieve Mail"> <PARAM NAME="button3Start" VALUE="50"> <PARAM NAME="button3Size" VALUE="25"> <PARAM NAME="button3Desc" VALUE="Jump to Links Page"> </APPLET>
	otes on the Applet Parameters The height and width values in the applet tag correspond to the height and width of the "base" image (DemoBar2a.GIF). Note that all images are the same size. Notice that the DemoBar2a.GIF image was used for both the "base" and "mouseOver2" parameters. The applet does not load the image twice, but rather loads the image once and uses it twice. 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.
Copyright © 1997 by Modern Minds, Inc.