アプレットの説明

画像がスクリーンの中をふわふわと飛び回ります。

基本操作：

左下のをクリックすると、動作が変わります。左をクリックすると「雲の動き」、右をクリックすると「地球の動き」になります。
画像をクリックすると、新しいウィンドウが表示され、指定したページが表示されます。
背景をクリックすると、画像は一時停止します。もう一度クリックすると、再び画像は動き出します。

雲の動き：

マウスカーソルを動かすと、その方向に画像が移動します。

地球の動き：

マウスをドラッグすると、ドラッグした方向、距離に応じて画像の動きが変化します。
一画面に表示される画像の最大数は、20枚です。中心のをクリックすると、画像が20枚以上ある場合は、次の20枚が表示されます。

このアプレットは、次のブラウザで表示できます。

• ネットスケープ ナビゲーター 4.0.6 以上
• マイクロソフト インターネット エクスプローラ 4.0 以上

パラメータ情報

注1： NNNN は、4 桁の数値です。画像が 5 個あるときには、 0000 から 0004 を指定してください。
注2： thumbnailNNNN には、あまり大きい画像は指定しないで下さい。 このアプレットは、 124 x 94 ピクセルの画像を指定したときに一番美しく表示できるように設計されています。

アプレット・タグ

<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="th_photo008.jpg">
<PARAM name="original0000" value="photo008.jpg">
<PARAM name="thumbnail0001" value="th_photo032.jpg">
<PARAM name="original0001" value="photo032.jpg">
<PARAM name="thumbnail0002" value="th_photo013.jpg">
<PARAM name="original0002" value="photo013.jpg">
<PARAM name="thumbnail0003" value="th_photo005.jpg">
<PARAM name="original0003" value="photo005.jpg">
<PARAM name="thumbnail0004" value="th_photo019.jpg">
<PARAM name="original0004" value="photo019.jpg">
<PARAM name="thumbnail0005" value="th_photo014.jpg">
<PARAM name="original0005" value="photo014.jpg">
<PARAM name="thumbnail0006" value="th_photo041.jpg">
<PARAM name="original0006" value="photo041.jpg">
<PARAM name="thumbnail0007" value="th_photo034.jpg">
<PARAM name="original0007" value="photo034.jpg">
<PARAM name="thumbnail0008" value="th_photo012.jpg">
<PARAM name="original0008" value="photo012.jpg">
<PARAM name="thumbnail0009" value="th_photo017.jpg">
<PARAM name="original0009" value="photo017.jpg">
</APPLET>

FlyImage アプレットをカスタマイズするには

1. FlyImage フォルダの場所を確認する。

アプレットを挿入したページ(HTML ファイル)の保存場所を、 Windows エクスプローラや[サイト/素材ビュー]のフォルダ表示で確認してください。 HTML ファイルと同じフォルダに、「FlyImage」という名前のフォルダが作成されているはずです。 FlyImage アプレットで使用する画像は、この FlyImage フォルダの中に保存します。そのほか、 FlyImage フォルダの中には、FlyImage アプレットを実行するのにに必要なファイルが入っています。

（ただし、 HTML ファイルを初めて保存するときに「保存ファイル一覧」ダイアログでアプレットの保存場所を変更した場合は、ここで説明した場所以外に FlyImage フォルダが作成されます。その場所を確認してください。）

2. 画像を準備する。

FlyImage アプレットで表示したい画像を準備します。一画面に 20 枚の画像が表示されますので、見栄えのするページを作るには、最低でも 10 枚以上の画像を用意するのが良いでしょう。画像フォーマットは、GIF か JPEG でなければなりません。

表示する画像は、表示が遅くならないように 120x90 ピクセル程度のサイズにすることをおすすめします。また、FlyImage アプレットは、その程度の大きさの画像が一番美しく表示できるように設計されています。
サンプルでは、 124x94 ピクセルの画像を使用しています。640x480 ピクセルの画像を 120x90 ピクセルに縮小し、周囲に 2 ピクセルの白い枠を描いて作成しました。このような作業は、画像を加工するアプリケーションを使って行います。ホームページ・ビルダーに含まれる「ウェブアート デザイナー」でもこの作業が可能です。

作成した画像は、1. で確認した FlyImage フォルダに保存してください。

3. リンク先の画像を準備する。

アプレット上で、画像をクリックしたときにジャンプする画像や HTML ファイルを準備します。サンプルでは、縮小する前の元画像をリンク先にしています。

作成した画像は、 FlyImage フォルダに保存してください。

4. タグを編集する。

例えば、以下のような 10 組の画像素材を準備したと仮定して、説明します。

アプレットを挿入したページのソースをホームページ・ビルダーで開き、「HTML ソース」タブをクリックして、直接ソースを編集します。

アプレットを挿入したページのソースには、以下のような記述があるはずです（便宜のため行番号を振ってあります）。

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>

1,2,24 行目は変更する必要はありません。
3 行目は、画像の枚数を指定する部分です。 value="10" となっている部分を、準備した表示画像の枚数に変更してください（今回の例では変更の必要がありません）。
4行目〜23行目が、画像の場所を指定している部分です。この行を編集します。

1番目の画像の記述は、以下のようになります。

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

"thumbnail0000" は「1番目の表示される画像」、"original0000"は「1番目のリンクされる画像」を意味します。4桁の数値は、○番目の画像であれば、○-1 の値を指定します。2番目の画像であれば、 "thumbnail0001" や "original0001" 、20 番目の画像であれば、 "thumbnail0019" や "original0019" になります。

同様に、2 つ目の画像についての記述は、以下のようになります。

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

最終的に、この例の画像を表示するためのソースは、以下のようになります。

<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>

作成したページが正しく動作するか確認するには、必ず変更したページを保存してからプレビューを行ってください。

5. ページを転送する。

ページを転送する際には、 HTML ファイルと一緒に、 FlyImage フォルダを転送してください。 FlyImage フォルダの中には、作成した画像のほかに、 FlyImage アプレットを実行するのにに必要なファイルが入っています。

その他

画像は FlyImage フォルダ以外に置くこともできます。

上の例では、 FlyImage フォルダに作成した画像を全て収めましたが、それ以外のフォルダに画像を置くこともできます。ただし、その場合は、パラメータの書き方を工夫する必要があります。

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

の value パラメータは、 FlyImage フォルダを起点とした相対 URL、または http:// で始まる絶対 URL で記述する必要があります。
例えば、画像を FlyImage フォルダと同じ階層にある、 "images" フォルダに置いた場合は、このような記述になります。

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

画像を FlyImage 以外に置いた場合には、「サイト転送」や「ページ転送」で転送対象のファイルとして自動認識されなくなります。転送し忘れのないよう、注意してください。

画像のライブラリ以外にも活用できます

画像をクリックしたときのリンク先は、同じサイト内にある画像に限らず、 HTML ファイルや他サイトへのリンクを指定することも出来ますから、工夫次第で「動くリンク集」なども作ることができます。例えば、IBM.GIF という画像をクリックすると、日本アイ・ビー・エム株式会社のホームページにジャンプするような記述は、以下のようになります。

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

余計なファイルの削除について

Windows エクスプローラ等を起動して、FlyImage フォルダを開いてください。ここには、photo???.jpg という名前のファイルと、 th_photo???.jpg という名前のファイルがあります。これらのファイルは、サンプルに使用している画像ファイルですから、カスタマイズした後は必要ありません。削除しても構いません。