Flying Images

Applet Description

Many small images float on the screen.

Basic Operation:: Click at the bottom left to change the motion. Click the left icon to make the images move like clouds: click the right icon to make the images revolve. If you click an image, a new window opens, and a page that contains the selected image is displayed. If you click the background, the motion stops. If you click the background again, the motion restarts.
Motion of clouds:: If you move the mouse pointer, images move to that direction.
Motion of the earth:: If you drag the mouse in any direction, the motion of images is changed according to the direction and distance of the drag operation. Up to 20 images can be displayed on the screen. If you have more than 20 images and if you click at the center, the next 20 images are displayed.

This applet can be displayed with the following browsers:

Netscape Navigator 4.0.6 or later
Internet Explorer 4.0 or later

Parameter Information

Name	Description	Format	Default Value
wait	Display interval	Numeric value (milliseconds)	30
image	Number of image files	Numeric value	Required
thumbnailXXXX	URL of each image file	URL	Required
originalXXXX	URL of the link destination for each image	URL	None

Note 1: "XXXX" represents a 4-digit numeric value. If you have five image files, for example, specify from 0000 to 0004.
Note 2: For "thumbnailXXXX," do not specify images that are too large. This applet looks best when you use images of about 120 x 90 pixels.

Applet Tag

How to Customize FlyImage Applet

1. Checking the folder for FlyImage

First, using Windows Explorer or the Folder view of Site/Gallery View, check the location of the page (HTML file) that contains the applet. In the same folder with the HTML file, you will see a subfolder named FlyImage. This subfolder contains the files needed to run the applet. Also, it is the subfolder in which you will be saving all of the image files for use by this applet.

Note: If you have changed the location of the FlyImage applet in the Save Files dialog when you first saved the page, check the location where the FlyImage subfolder has been created.

2. Preparing the image files

Prepare the images you want to display with the FlyImage applet. Up to 20 images at a time can be displayed on the screen. For best results, prepare at least 10.

All of the images must be in GIF or JPEG format. They will look best if their size is about 120 x 90 pixels.

The images in the sample applet are 124 x 94 pixels. Each of them was prepared by reducing it from an original size of 640 x 480 pixels, and drawing white borderlines, 2 pixels thick, around it. You can prepare images with an application for editing images, such as WebArt Designer, a tool provided by Homepage Builder.

After you prepare the images, save them in the FlyImage subfolder, which is at the location you checked in step 1.

3. Preparing the images to be used as the link destination

In this step, you prepare an image or an HTML file to be linked from each image. The sample applet uses the original image (640 x 480 pixels) as the link destination of each image.

After you prepare the image, save it in the FlyImage subfolder.

4. Editing tags

This step assumes that the following 10 pairs of images have been prepared:

Image to be displayed (Image prepared in step 2)	Image to be displayed when the image in the left column is clicked (Image prepared in step 3)
aaa_s.jpg	aaa.jpg
bbb_s.jpg	bbb.jpg
ccc_s.jpg	ccc.jpg
ddd_s.jpg	ddd.jpg
eee_s.jpg	eee.jpg
fff_s.jpg	fff.jpg
ggg_s.jpg	ggg.jpg
hhh_s.jpg	hhh.jpg
iii_s.jpg	iii.jpg
jjj_s.jpg	jjj.jpg

In Homepage Builder, open the page that contains the applet, and click the HTML Source tab. The source file of the page should already contain the following tags. (The line numbers are shown just for readability.) Edit the source directly.

1:<APPLET codebase="FlyImage" code="FlyImage" width="640" height="512" name="Screen">
2:<PARAM name="wait" value="30">
3:<PARAM name="images" value="10">
4:<PARAM name="thumbnail0000" value="th_photo008.jpg">
5:<PARAM name="original0000" value="photo008.jpg">
6:<PARAM name="thumbnail0001" value="th_photo032.jpg">
7:<PARAM name="original0001" value="photo032.jpg">
8:<PARAM name="thumbnail0002" value="th_photo013.jpg">
9:<PARAM name="original0002" value="photo013.jpg">
:
20:<PARAM name="thumbnail0008" value="th_photo012.jpg">
21:<PARAM name="original0008" value="photo012.jpg">
22:<PARAM name="thumbnail0009" value="th_photo017.jpg">
23:<PARAM name="original0009" value="photo017.jpg">
24:</APPLET>

You do not need to change lines 1, 2, and 24. On line 3, change the value parameter to the number of images you have prepared. (In this example, you do not need to change the default value.) On lines 4 through 23, specify the location of each image, by the following procedure.

The tags for the first pair of images should be as follows:

<PARAM name="thumbnail0000" value="aaa_s.jpg">
<PARAM name="original0000" value="aaa.jpg">

"thumbnailXXXX" represents the image to be displayed on the screen, and "originalXXXX" represents the image to be linked from thumbnailXXXX. The numeric value (XXXX) is 0000 for the first pair of images, and increments by 1. Thus the second pair of images specified is "thumbnail0001" and "original0001," and the twentieth pair is "thumbnail0019" and "original0019."

By this rule, the second pair of images should be as follows:

<PARAM name="thumbnail0001" value="bbb_s.jpg">
<PARAM name="original0001" value="bbb.jpg">

The source for this example is therefore as follows:

<APPLET codebase="FlyImage" code="FlyImage" width="640" height="512" name="Screen">
<PARAM name="wait" value="30">
<PARAM name="images" value="10">
<PARAM name="thumbnail0000" value="aaa_s.jpg">
<PARAM name="original0000" value="aaa.jpg">
<PARAM name="thumbnail0001" value="bbb_s.jpg">
<PARAM name="original0001" value="bbb.jpg">
<PARAM name="thumbnail0002" value="ccc_s.jpg">
<PARAM name="original0002" value="ccc.jpg">
:
<PARAM name="thumbnail0008" value="iii_s.jpg">
<PARAM name="original0008" value="iii.jpg">
<PARAM name="thumbnail0009" value="jjj_s.jpg">
<PARAM name="original0009" value="jjj.jpg">
</APPLET>

To verify the movement of the images on this page, first save the page, and then click the Preview tab to preview it.

5. Uploading the page

When you upload this page, do not forget to upload the FlyImage subfolder along with the HTML file. That subfolder contains all of the images you have prepared, as well as the files necessary for running the FlyImage applet.

Notes

Placing the images in a folder other than the FlyImage subfolder

In this example, we saved all of the images in the FlyImage subfolder. You can, however, save them in a different folder by changing the parameters, as follows:

<PARAM name="thumbnail????" value="...">
<PARAM name="original????" value="...">

where the value parameter is a URL relative to the FlyImage subfolder or an absolute URL starting with http://. For example, if you have placed the images in a folder named "images," which is on the same directory level as FlyImage, specify the value parameter as follows:

<PARAM name="thumbnail0000" value="../images/aaa_s.gif">

If you place image files in a folder other than FlyImage, Homepage Builder does not recognize them as the files to be transferred during a page upload or site upload. Be careful not to forget to upload them.

Setting links to other sites and HTML files

For the link destination of an image, you can specify not only an image in the same site but also an HTML file or another site. This makes it possible to create "moving links." For example, to enable the user to jump from image IBM.GIF to the Web site for IBM, specify as follows:

<PARAM name="thumbnail0000" value="IBM.GIF">
<PARAM name="original0000" value="http://www.ibm.com">

Deleting sample image files

Start Windows Explorer, and open the FlyImage subfolder. You will see files named photo???.jpg and th_photo???.jpg. These files are used in the sample and can be deleted after you have customized the applet.

Return to index