[Japanese|English]




ImageChanger Applet

Ver.2.01


Original CG by Groupware



Introduction

ImageChanger is an applet that displays a series of GIF or JPG images one after another, and its main characteristic is that various effects can be used for the transitions between images.

This applet can be used for the display of a wide variety of pictures, including photos, artwork, and cartoons. In addition, some explanatory text or a title can be displayed with each image, so it is useful for slide shows, picture stories, diagrams, etc.

The idea for this applet came from Hideto Yamaguchi, whom I would like to thank here.

I thank Jay Johnson, who translated this page from Japanese to English.


Applet Functions

  • Multiple images can be displayed automatically for a period of time that you specify. It is also possible to have the image change when the displayed image is clicked on.

  • One of 20 different transition effects can be specified for each image.

  • Image display can begin as soon as the first image has been downloaded, with the next image being downloaded during display of the previous one in each case, or display can begin only after all the images have been downloaded.

  • The URL for a link can be specified for any or all images, so that clicking on the image will activate the link and the referenced page will be displayed. Links can also be automatically activated on display of the image if you wish.

  • The frame in which to display the page can also be specified when HTML frames are used.

  • Display order and/or transition effect order can be made random.

  • Titles can be displayed for each image, and the position and style (i.e., font size, color, underlining, background color, etc.) for each one can also be specified.

  • By using the TextChanger applet, different text can be displayed for each image.


Usage

  • Place the class file (ImageChanger.class and ImageChanger.class) in the same directory as the HTML page file.

  • The image files must be placed in the same directory as the above files.

  • The following applet code is placed in the HTML page file where you want the pictures to be displayed on the page. Image file names should be separated by a comma. File names are not case sensitive.

    <APPLET CODE="ImageChanger.class" WIDTH=288 HEIGHT=206>
    <PARAM NAME="images" VALUE="PHOT003.GIF,PHOT005.GIF,
    PHOT021.GIF,PHOT059.GIF,PHOT065.GIF,PHOT063.GIF">
    </APPLET>

  • With this code, the images will be displayed every 5 seconds as the default time.


Parameters

imageDir

This parameter is used to specify the relative path for the location (directory) of the image files.

<APPLET CODE="ImageChanger.class" WIDTH=288 HEIGHT=206>
<PARAM NAME="images" VALUE="PHOT003.GIF,PHOT005.GIF,PHOT021.GIF,
PHOT059.GIF,PHOT065.GIF,PHOT063.GIF">
<PARAM NAME="imageDir" VALUE="images">
</APPLET>


randomEffect

To specify a random transition effect for the images, the following applet code is used:

<APPLET CODE="ImageChanger.class" WIDTH=288 HEIGHT=206>
<PARAM NAME="images" VALUE="PHOT003.GIF,PHOT005.GIF,PHOT021.GIF,
PHOT059.GIF,PHOT065.GIF,PHOT063.GIF">
<PARAM NAME="randomEffect" VALUE="true">
</APPLET>


|number

For a specific effect, the number of the effect (see table below) is specified for each image and preceded by a vertical bar, as in the following:

<APPLET CODE="ImageChanger.class" WIDTH=288 HEIGHT=206>
<PARAM NAME="images" VALUE="PHOT003.GIF|6,
PHOT005.GIF|7,PHOT021.GIF|10,PHOT059.GIF|4,PHOT065.GIF|8,
PHOT063.GIF|9">
</APPLET>


|-|URL

To attach a link to an image, the following applet code is used. One or all images can have links, or different types of links can be used, as shown here.

<APPLET CODE="ImageChanger.class" WIDTH=288 HEIGHT=206>
<PARAM NAME="images" VALUE="PHOT003.GIF|6|-|http://www.aaamart.co.jp/wang/index.html,
     PHOT005.GIF|7|-|http://www.sunplus.com/fuji/livee.htm,
     PHOT021.GIF|10|-|http://www.infotrans.or.jp/~hideto/rose/
     library/library.html,
     PHOT059.GIF|4|-|http://www.safariair.com/pics.html,
     PHOT065.GIF|8|-|http://www.jamstec.go.jp/,
     PHOT063.GIF|9|-|../STR/RainbowString.html">
</APPLET>


frame

When you wish to specify the frame in which to display the referenced pages, use the FRAME parameter with the frame name (_blank, _self, _parent, _top, an original name, etc.) as its value:

<PARAM NAME="frame" VALUE="_self">


titles

To display a title for each image, use the following applet code and separate all titles with a comma. As shown here for example, other parameters are used to specify text characteristics.

<APPLET CODE="ImageChanger.class" WIDTH=288 HEIGHT=206>
<PARAM NAME="images" VALUE="PHOT003.GIF|6,
PHOT005.GIF|7,PHOT021.GIF|10,PHOT059.GIF|4,PHOT065.GIF|8,
PHOT063.GIF|9">
<PARAM NAME="titles" VALUE="Mountain,Mt. Fuji,Rose,Helicopter,The Ocean,Rainbow">
<PARAM NAME="fontShadowColor" VALUE="000000">
<PARAM NAME="fontBackColor" VALUE="404080">
</APPLET>

To specify the location of the title, the title text is followed immediately by a vertical bar and then the code for location shown in this table:

nwnne
 c 
swsse

For example,

<APPLET CODE="ImageChanger.class" WIDTH=288 HEIGHT=206>
<PARAM NAME="images" VALUE="PHOT003.GIF|6,
PHOT005.GIF|7,PHOT021.GIF|10,PHOT059.GIF|4,PHOT065.GIF|8,
PHOT063.GIF|9">
<PARAM NAME="titles" VALUE="Mountain|sw,Mt. Fuji|s,Rose|se,Helicopter|nw,The ocean|c,Rainbow|se">
<PARAM NAME="fontShadowColor" VALUE="000000">
<PARAM NAME="fontBackColor" VALUE="404080">
</APPLET>


Text Display

  • To associate the text with the images, the ImageChanger applet tag must contain a parameter such as the following one in it —

    <PARAM NAME="target" VALUE="text1">

    Here the value for the "VALUE" option can be anything.

    In addition, the TextChanger applet tag must contain a NAME option with the same value as above, i.e., "text1" here.

  • The following applet tags are then placed in the HTML page file at the location of your choice.

<APPLET CODE="ImageChanger.class" WIDTH=288 HEIGHT=206>
<PARAM NAME="images" VALUE="PHOT003.GIF|6,PHOT005.GIF|7,
PHOT021.GIF|10,PHOT059.GIF|4,PHOT065.GIF|8,PHOT063.GIF|9">
<PARAM NAME="target" VALUE="text1">
</APPLET>
<P>
<APPLET CODE="TextChanger.class" WIDTH=288 HEIGHT=45 NAME="text1">
<PARAM NAME="texts" VALUE="Picture 1\nDo you like mountains?|
     Picture 2\nMt.Fuji is the highest mountain in Japan.\n
     Picture 3\nLife is not all roses.|
     Picture 4\nA helicopter flies in the sky.|
     Picture 5\nDo you like sea?|
     Picture 6\nOver the rainbow!?">
</APPLET>

  • In the "texts" parameter, the text to be displayed with each image is specified in order, and each text is separated with a vertical bar immediately after it. When it is necessary to start a new line of text, the code \n is placed at the end of each line.


Download Applet Files

The ImageChanger applet files can be downloaded in a compressed ZIP file by clicking on the link below.

ImageChanger201.zip

The following files contain the source code.

ImageChanger.java
TextChanger.java


List of Options and Parameters

For the ImageChanger Applet

Options

NameValueMeaning
codeImageChanger.classApplet name (required)
widthnumber of pixelsApplet width (usually the width of the image)
heightnumber of pixelsApplet height (usually the height of the image)


Parameters

NameValueMeaning
timenumber of milliseconds Time each image is displayed. A value of 0 (zero) means that a click will determine when the change is made. Default is 5000 (5 seconds)
imageDirpath Relative path to directory containing images
drawWhileLoadingtrueDisplay begins after first image has been downloaded
falseDisplay begins after all images are downloaded
bgColorRGB values Applet background color. Default is "000000," black. Useful when the image is smaller than the applet space or when transparent GIFs are used.
fadeColorRGB values Fade-in, fade-out color. Default is "000000," black.
scrollSpeedpositive number Image scroll speed for transition effects 1~4, 15~18. Default is 6.
changeSpeedpositive number Image opening speed for transition effects 5~8, 11~14, 19, 20. Default is 3.
mosaicSpeedpositive number Mosaic change speed for transition effect 10. Default is 4.
fadeTimepositive number Fade-in, fade-out time in milliseconds for transition effect 9. Default is 80.
change
Image transition effects.
Default is 0.
0Instant replacement
1Scroll out upwards
2Scroll out downwards
3Scroll out to right
4Scroll out to left
5Opens upward and downward from center
6Opens to left and right from center
7Opens outward from center
8Opens inward from edges
9Fade out, fade-in
10Mozaic
11Change from left to right
12Change from right to left
13Change from bottom to top
14Change from top to bottom
15Scroll in from bottom
16Scroll in from top
17Scroll in from left
18Scroll in from right
19Change from top and bottom toward center
20Change from left and right toward center
imagesImage file name(|change(|time(|URL))),
Image file name(|change(|time(|URL))),...
Specifies image file name and options (optional), which include change (effect), time of display, URL (relative path okay). When change and time are not specified, the default value is used. Image file names are separated by commas, and options for them are separated by vertical bars. Unspecified options are indicated with a hyphen.
randomOrdertrueDisplay order is random
falseDisplayed in specified order (default)
randomEffecttrueTransition effect is random
falseSpecified transition effects are used (default)
mosaicWidthnumber of pixelsWidth of mosaic elements (default=16)
mosaicHeightnumber of pixelsHeight of mosaic elements (default=16)
titlesimage title Titles for images are specified in order and separated by vertical bars. Unspecified titles are indicated by a hyphen.
fontSizenumber of points Title font size (default is 12)
fontColorRGB values Title text color (default is "FFFFFF")
fontShadowColorRGB values Title shadow color
fontBackColorRGB values Title background color
fontLineColorRGB values Title text underline color
titleLocation Location of Title
nwUpper left
nTop center
neUpper right
cCenter
swLower left
sBottom center
seLower right
targetany text string Target name specified in TextChanger parameter. Required for association of text with images.)
frameframe name Name of frame in which linked page is to be displayed (_blank, _self, _parent, _top, etc.). Same as target option in <FRAME> tag.
autoLinktrue Automatic display of linked page
false Display of linked page when image is clicked on


For the TextChanger Applet

Options

NameValueMeaning
codeTextChanger.classApplet name (required)
widthnumber of pixelsApplet width (usually the width of the images)
heightnumber of pixelsApplet height (usually the height of the images)
nameany text stringName of target used to associate with the ImageChanger applet. The ImageChanger "target" parameter must have the same value.


Parameters

NameValueMeaning
bgColorRGB valuesBackground color (default depends on OS or platform)
fgColorRGB values Text color (default is white)
textsany text string Text for each image is specified and separated with vertical bars. When there is no text for an image, a hyphen is used in that place. Line change is specified with the code \n.


History

1998.10.4 (Ver.2.02)
1997.8.10 (Ver.2.01)
Added linking to frames and automatic link activation.

1997.7.23 (Ver.2.0)
Added TextChanger function for display of text with images, as well as the display of titles.

1997.6.30 (Ver.1.3)
Added 5 transition effects. Removed change of mouse pointer shape when it was inside the applet space. Corrected condition in which the applet stopped if a linked page did not display or if its display was terminated.

1996.12.7 (Ver.1.21)
Made it possible to specify relative paths for pages on the same server.

1996.11.29 (Ver.1.2)
Added link function. Added 5 transition effects. Added random display and random transition effect functions. Changed fade-in and fade-out methods in order to reduce CPU processing time and increase stability.


NAKAGAWA Masami nakagawa@yo.rim.or.jp