 How to Customize your Image Carousel 


The following is a small guide on how to properly set up the individual Applet/HTML parameters for the Image Carousel. Each HTML parameter is listed, along with what parameters can be changed within it.

<APPLET CODE="carousel_text.class" NAME="Image Carousel" WIDTH="475" HEIGHT="250">

The APPLET CODE= is the applet startup tag. This tag can have one of two classes listed, depending on whether youre using the horizontal or vertical version of the Image Carousel.

The class filename to use for the horizontal Image Carousel is carousel_text.class; the class filename to use for the vertical Image Carousel is carousel_verttext.class. These filenames are CASE sensitive and CANNOT be changed.

The NAME tag can be any valid name you desire. This is the string displayed in the browsers status bar when the applet is initially launched.

The function of the WIDTH and HEIGHT tags for the applet change depending on whether youre using the horizontal or vertical version of the Image Carousel. If youre using the horizontal version: 
The WIDTH of the applet is directly responsible for the spacing between images, along with the actual image width and number of images. Images are spaced in equal amounts along the wheel.

The HEIGHT should be as small as possible; however, the Image Carousel will need a specific amount of room to render images and text. The room needed is a function of the height of the images and the "tilt" of the wheel (i.e., if the carousel is on a slanted plane). If the height is too small the applet will generate an error message and print the amount of additional pixels the applet needs to have in the HEIGHT parameter. (The error is printed on the browser status bar).

If youre using the vertical version: 
The WIDTH should be as small as possible; however, the Image Carousel will need a specific amount of room to render images and text. The room needed is a function of the width of the images and the "tilt" of the wheel (i.e., if the carousel is on a slanted plane). If the width is too small the applet will generate an error message and print the amount of additional pixels the applet needs to have in the WIDTH parameter. (The error is printed on the browser status bar).

The HEIGHT of the applet is directly responsible for the spacing between images, along with the actual image height and number of images. Images are spaced in equal amounts along the wheel.

<PARAM NAME="numimages" VALUE="5"> 

This parameter dictates the number of images that are to be used in the Image Carousel.

<PARAM NAME="backcolor" VALUE="ffffff">

This parameter sets the background color of the applet and of text generated images. The value is a standard HTML hexadecimal color value represented in "rrggbb" format.

<PARAM NAME="underlinecolor" VALUE="000000"> 

When images pass close enough to the center of the carousel that the text associated with that image is displayed, the image is actually underlined as well. The "underlinecolor" parameter allows you to set the color of the underlining. 

Important! Please note that in Java*, you do not use the "#" symbol prior to the color code as you would for an HTML page. 

To change to any other color simply change the code in bold to match your pages look and feel. If you are unfamiliar with "hexadecimal" color codes, then click here to find out more.

<PARAM NAME="showhand" VALUE="yes">

Determines whether or not the small hand-cursor image (shipped with the carousel applet) is drawn to the display or not. The value can be yes or no.

<PARAM NAME="speed" VALUE="medium">

How fast the images rotate around the Image Carousel. The value can be set to low, medium, and high. A value of low will have the slowest possible carousel rotation, while a value of high will have the fastest possible carousel rotation.

<PARAM NAME="tilt" VALUE="medium">

The "tilt" of the wheel. This value determines the apparent tilt (or view angle) of the wheel. The value can be set to none, low, medium and high. A value of none will cause the carousel to have no tilt whatsoever (causing you to look at it edge-on), while a value of high will have an almost circular ellipse.

<PARAM NAME="washout" VALUE="medium">

This determines how much an image is allowed to "wash out" as it passes along the back portion of the wheel. The value can be set to none, low, medium or high. A value of none will have no washout properties whatsoever, while a value of high will cause images to washout almost completely.

<PARAM NAME="headerfontsize" VALUE="13">

<PARAM NAME="textfontsize" VALUE="12">

These parameters control the font size used to display the text displayed below the images. Header font size controls the font size of the Header text, while text font size controls the font size of the Body text (the text beneath the header).

<PARAM NAME="headerfontcolor" VALUE="008f00">

<PARAM NAME="textfontcolor" VALUE="000000">

These parameters control the font color of the text displayed below the images. The value is a standard HTML hexadecimal color value representing rrggbb format. 

Important! Please note that in Java*, you do not use the "#" symbol prior to the color code as you would for an HTML page. 

To change to any other color simply change the code in bold to match your pages look and feel. If you are unfamiliar with "hexadecimal" color codes, then click here to find out more.

<PARAM NAME="headerfontname" VALUE="Helvetica">

<PARAM NAME="textfontname" VALUE="Helvetica">

These parameters control the font used for the text displayed below the images. The three valid choices are "Helvetica", "Courier", and "TimesRoman". Note that these names ARE case-sensitive and must be entered as shown. Header font names controls the font used for the Header text, while text font name controls the font used for the Body text (the text beneath the header).

<PARAM NAME="image1" VALUE="picture1.jpg,http://www.intel.com,page">

The parameter above allows you to call out which images to use and to which URL or web page the image will linked. The number of images listed in these parameters must not exceed the amount set in the previous "numimages" parameter. The series consists of:

<PARAM NAME="image1" -- for image names, URL links and link types

Images must be listed in sequential order. For example:

<PARAM NAME="image1" VALUE="  ">

<PARAM NAME="image2" VALUE="  ">

<PARAM NAME="image3" VALUE="  ">

.

.

<PARAM NAME="image6" VALUE="  ">


The actual values for the image fields are as follows:

<PARAM NAME="image1" VALUE="picture1.jpg,http://www.yourURL.com, page">

In place of picture1.jpg place the name of your image. The image filename must be a complete filename, ending with the .GIF or .JPG extension.

After a comma, the Web page that your image will be linked is listed next. The URL must be a full URL, that is, one that begins with "http://"

After another comma, the type of link is placed. The link type can be one of 3 values:

"page" - Link to new page (This is the most common selection)

"frame" - Link to a frame

"window" - Link to new window

If the value is page or window, you may close the parameter with the ">" symbol. If the value is frame (link to a frame), then add a comma followed by the name of the frame you are linking to. You can also choose between:


 "self" to load in the current frame  
 "parent" to load in the parent frame  
 "top" to load in the top-most frame  
 "blank" to load in a new unnamed top-level window  

For example, to link image1 to the http://www.intel.com site and have it launch within the pages "parent frame" use the following notation:

<PARAM NAME="image1" VALUE="picture1.jpg,http://www.intel.com,frame,parent">

<PARAM NAME="header1" VALUE="1966 Mustang">

The Text Header for the Body Text that is displayed below the images.

<PARAM NAME="text1" VALUE="New red paint with black top. Show car.">

The actual body text used in the text field that is displayed below the images. Because applet size is critical in the Image Carousel, no attempt is made to self-adjust the image sizes according to the formatting of the text, and it is up to you to ensure that the text correctly fits in the image space and is correctly aligned.

The Image size used for the text fields is the same as the image size of the text's corresponding image.

In order to properly line up text in the image, use the '~' as a carriage return indicator (i.e., insert the '~' character wherever a carriage return should occur).

IMPORTANT! Once you have customized your applet to your satisfaction, you should test the applet by running it on your local computer before uploading or sending your files to your web server space at your Internet service provider. Remember, in order for your applet to perform correctly, all files associated with your applet must be uploaded to the same directory or folder within your web server space. This includes all html files, class files, and image files.
