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:
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
| Name | Value | Meaning |
| code | ImageChanger.class | Applet name (required) |
| width | number of pixels | Applet width (usually the width of the image) |
| height | number of pixels | Applet height (usually the height of the image) |
Parameters
| Name | Value | Meaning |
| time | number 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) |
| imageDir | path |
Relative path to directory containing images |
| drawWhileLoading | true | Display begins after first image has been downloaded |
| false | Display begins after all images are downloaded |
| bgColor | RGB values |
Applet background color. Default is "000000," black. Useful when the image is smaller than the applet space or when transparent GIFs are used. |
| fadeColor | RGB values |
Fade-in, fade-out color. Default is "000000," black. |
| scrollSpeed | positive number |
Image scroll speed for transition effects 1~4, 15~18. Default is 6. |
| changeSpeed | positive number |
Image opening speed for transition effects 5~8, 11~14, 19, 20. Default is 3. |
| mosaicSpeed | positive number |
Mosaic change speed for transition effect 10. Default is 4. |
| fadeTime | positive number |
Fade-in, fade-out time in milliseconds for transition effect 9. Default is 80. |
| change | Image transition effects.
Default is 0. |
| 0 | Instant replacement |
| 1 | Scroll out upwards |
| 2 | Scroll out downwards |
| 3 | Scroll out to right |
| 4 | Scroll out to left |
| 5 | Opens upward and downward from center |
| 6 | Opens to left and right from center |
| 7 | Opens outward from center |
| 8 | Opens inward from edges |
| 9 | Fade out, fade-in |
| 10 | Mozaic |
| 11 | Change from left to right |
| 12 | Change from right to left |
| 13 | Change from bottom to top |
| 14 | Change from top to bottom |
| 15 | Scroll in from bottom |
| 16 | Scroll in from top |
| 17 | Scroll in from left |
| 18 | Scroll in from right |
| 19 | Change from top and bottom toward center |
| 20 | Change from left and right toward center |
| images | Image 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. |
| randomOrder | true | Display order is random |
| false | Displayed in specified order (default) |
| randomEffect | true | Transition effect is random |
| false | Specified transition effects are used (default) |
| mosaicWidth | number of pixels | Width of mosaic elements (default=16) |
| mosaicHeight | number of pixels | Height of mosaic elements (default=16) |
| titles | image title |
Titles for images are specified in order and separated by vertical bars. Unspecified titles are indicated by a hyphen. |
| fontSize | number of points |
Title font size (default is 12) |
| fontColor | RGB values |
Title text color (default is "FFFFFF") |
| fontShadowColor | RGB values |
Title shadow color |
| fontBackColor | RGB values |
Title background color |
| fontLineColor | RGB values |
Title text underline color |
| titleLocation |
Location of Title |
| nw | Upper left |
| n | Top center |
| ne | Upper right |
| c | Center |
| sw | Lower left |
| s | Bottom center |
| se | Lower right |
| target | any text string |
Target name specified in TextChanger parameter. Required for association of text with images.) |
| frame | frame name |
Name of frame in which linked page is to be displayed (_blank, _self, _parent, _top, etc.). Same as target option in <FRAME> tag. |
| autoLink | true |
Automatic display of linked page |
| false |
Display of linked page when image is clicked on |
For the TextChanger Applet
Options
| Name | Value | Meaning |
| code | TextChanger.class | Applet name (required) |
| width | number of pixels | Applet width (usually the width of the images) |
| height | number of pixels | Applet height (usually the height of the images) |
| name | any text string | Name of target used to associate with the ImageChanger applet. The ImageChanger "target" parameter must have the same value. |
Parameters
| Name | Value | Meaning |
| bgColor | RGB values | Background color (default depends on OS or platform) |
| fgColor | RGB values |
Text color (default is white) |
| texts | any 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
|