Make your own free website on Tripod.com

FadeImages Setup

Note: REGISTERED VERSION IS MUCH SMALLER AND WILL LOAD MUCH FASTER.

Evaluation Applet Size: 43K
Registered Applet Size: 9K

Downloaded from http://javapplets.com

First things First
This is a nice easy applet to set up. All that you need to do to get started is to decide on the images that you want to use, and make them all the same dimensions. If your images are of different dimensions, you can rescale them or add a border to make them the correct dimensions. For our example we used the following images:






Setting up the applet

Here is how to set up the FadeImages applet in 3 easy steps.

1. Upload the file FadeImages.class into the same directory as the web page that you are going to put the applet on, along with all of the images that you are going to use. That is the page, the graphics and the applet should be in the same directory. Advanced users can place the applet in a different directory using the CODEBASE attribute, but we won't get into that here.

2. Configure the parameters. This is the hardest part for most users, so read carefully.

First configure the applet tag to tell the browser which applet to load and how big to make it. The applet tag must include the following:
<APPLET CODE="FadeImages.class" WIDTH=x HEIGHT=y>
Of course, substitute the width in pixels that you want the applet to be for x, and the height that you want for y. Here for the applet to function correctly the width and height should be that of your images, which as you remember should all be the same.

Next, we need to create the actual parameters of the applet. Each parameter has a name and a value. The names are predetermined, the values are up to you. The tag appears as follows:
<PARAM NAME="Some Name" VALUE="Some Value">
Of course, that parameter will get you no where with this applet. Here is the list of parameters with the types of values that you should put in. You will notice that some of them have default values. Any parameter with a default value can be omitted if you are happy with the default value.

The Easy Part:

What we call the parameter (NAME) What we mean (VALUE)
BGCOLOR This is the inital color of the applet while it loads the images. It is not displayed at anytime once the images have been loaded. Specify the color in hexadecimal, as with your web page. EG BLACK=000000. Defaults to light gray.
TRANSITION FRAMES This is the inital color of the applet while it loads the images. It is not displayed at anytime once the images have been loaded. Specify the color in hexadecimal, as with your web page. EG BLACK=000000. Defaults to light gray.
TRANSITION DELAY This is the number of milliseconds that the applet will pause when drawing the fade transition. Setting it higher will make the transition take longer. Defaults to 100 milliseconds
DISPLAY DELAY This is the number of milliseconds that the applet will pause after completing the transition. Defaults to 5000 (5 Secs).
REPEAT VALUE This is the number of times that you want the applet to repeat the entire sequence of images. Defaults to -2 which causes the applet to repeat forever.

Thats the easy part because all of the parameters have default values and can be ignored if you so desire. This following section is important because it is required by the applet. Without the following parameters, the applet will not function.

That is because the following parameters define the images to be used - without them there are no images to fade between. Creating the parameters is easy. The first image that you want to have displayed in named IMAGE 1, and has a value that is the name of the first image you want displayed (if you used our suggestion to put the HTML page, applet, and images in the same place, otherwise it is the path to the image). The second image parameter has the name IMAGE 2, and and has a value that is the name of the second image you want displayed (if you used our suggestion to put the HTML page, applet, and images in the same place, otherwise it is the path to the image), and so one. Here is an example using two images:

<PARAM NAME="IMAGE 1" VALUE="Image-1.gif">
<PARAM NAME="IMAGE 2" VALUE="Image-2.jpg">

Of course, you should substitute the names of your images for Image-1.gif and Image-2.gif.

Thats all there is to it. When you are done your code should look something like this:

<APPLET CODE="FadeImages.class" WIDTH="208" HEIGHT="142">
	<PARAM NAME="IMAGE 1" VALUE="FadeImages1.gif">
	<PARAM NAME="IMAGE 2" VALUE="FadeImages2.jpg">
	<PARAM NAME="IMAGE 3" VALUE="FadeImages3.jpg">
	<PARAM NAME="IMAGE 4" VALUE="FadeImages4.jpg">
	<PARAM NAME="IMAGE 5" VALUE="FadeImages5.jpg">
	<PARAM NAME="DISPLAY DELAY" VALUE="3000">
	<PARAM NAME="TRANSITION DELAY" VALUE="100">
	<PARAM NAME="TRANSITION FRAMES" VALUE="10">
	<PARAM NAME="BGCOLOR" VALUE="FF00A0">
</APPLET>

3. Place this code into your HTML file and give it a try! Please let us know if this configuration page was helpful to you or if you have any suggestions as to how to improve it.

Copyright 1999 Black Lab Design. All Rights Reserved. Javapplets.com is not affiliated with Sun Microsystems, Inc. Java and all Java-based trademarks are registered trademarks of Sun Microsystems, Inc. in the United States and in other countries. The www.sun.com Weblink Logo is a trademark or registered trademark of Sun Microsystems, Inc. in the U.S. and other countries. All applets are provided without any warranty, express or implied. Use of applets is limited to evaluation on pages not made available to more than 5 users. To derive full benefit from this website you must use a Java enabled browser such as Microsoft Internet Explorer 3.0+ or Netscape Navigator 2.0+. Please let us know if you run into any problems using this site or our applets. We want to know!