Original CG by Groupware
ImageChangerは、GIFやJPEGなどの画像ファイルを、次々に切り替えて表示するためのアプレットです。 画像を切り替える時に、色々な効果を付加することができるのが最大の特徴です。写真や絵、漫画等のディスプレイに幅広く活用できると思います。 また、画像と連動して文章を表示させることもできますので、 紙芝居風の作品や、説明付きの図や写真等々、 工夫次第で様々な用途に使えると思います。
なお、このアプレットのアイデアは、 山口秀人さんに頂きました。この場を借りてお礼申し上げます。
注) TextChanger を使用しない場合でも、TextChanger.class を置いておく必要があります。
<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>
<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>
<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>
<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>
<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>
<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>
<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>
ロケーション名とタイトルの位置との関係は、以下のようになります。
nw | n | ne |
c | ||
sw | s | se |
<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=60 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>
以下をクリックすると、ImageChangerアプレットをダウンロードできます。 圧縮ファイルですので、解凍してからご利用ください。以下をクリックすると、ソースコードを見ることができます。
■ appletタグで設定するパラメータ
名前 設定値 意味 code ImageChanger.class アプレットの名前。(固定) width 正の整数 アプレットの横幅。 (ピクセル数。通常は、画像ファイルの横幅) height 正の整数 アプレットの縦幅。 (ピクセル数。通常は、画像ファイルの縦幅) ■ paramタグで設定するパラメータ
name value 意味 time 正の整数 画像表示時間のデフォルト値(単位ミリ秒)。 0を指定した場合、マウスクリックで切り替え(デフォルトは5000)。 imageDir ディレクトリ名 画像ファイルを置くディレクトリ名(相対パス)。 drawWhileLoading true 1枚目の画像ファイルをダウンロード後、表示開始。(デフォルト) false 全てのファイルをダウンロード後、表示開始。 bgColor 6桁の16進数(RGB値) アプレットの背景色(デフォルトは、000000)。 画像がアプレットサイズより小さい場合、または、透過ファイルの場合に有効。 fadeColor 6桁の16進数(RGB値) フェードイン・フェードアウト時の色(デフォルトは、000000)。 scrollSpeed 正の整数 画像のスクロールスピード(changeパラメータの1〜4,15〜18に対応。デフォルトは6)。 changeSpeed 正の整数 画像の開くスピード(changeパラメータの5〜8,11〜14,19,20に対応。デフォルトは3)。 mosaicSpeed 正の整数 モザイクの変化スピード(changeパラメータの10に対応。デフォルトは4)。 fadeTime 正の整数 フェードアウト・フェードインに要する時間 (1コマあたり、単位ミリ秒。changeパラメータの9に対応。デフォルトは80。) change 画像切り替え方法(エフェクト番号)のデフォルト値 を指定する(デフォルトは0)。 0 画像を瞬時に切り替える。 1 上へスクロールアウト。 2 下へスクロールアウト。 3 右へスクロールアウト。 4 左へスクロールアウト。 5 中央から上下に開く。 6 中央から左右に開く。 7 中心から外に広がるように開く。 8 外から中心に向かって閉じる。 9 フェードアウト・フェードイン 10 モザイク 11 左から右へ変化。 12 右から左へ変化。 13 下から上へ変化。 14 上から下へ変化。 15 下からスクロールイン。 16 上からスクロールイン。 17 左からスクロールイン。 18 右からスクロールイン。 19 上下から中央へ変化。 20 左右から中央へ変化。 images 画像ファイル名(|change(|time(|URL))),画像ファイル名(|change(|time(|URL))),... 画像ファイル名とその属性(省略可)を指定する。 属性として、change(エフェクト)、time(表示時間)、URL(相対指定可)を指定できる。 change,time属性を指定しない場合、デフォルト値が用いられる。 画像ファイル名は、","で区切って指定し、 その属性は、"|"で区切って指定する。 途中の属性を省略したい場合、'-'を指定する。 (例えば、change,timeを指定せずに、URLを指定する場合は、 画像ファイル名|-|-|URLのように記述する。) randomOrder true 表示順をランダムにする。 false 指定された順に表示する。(デフォルト) randomEffect true エフェクトの選択をランダムにする。 false 指定されたエフェクトで表示する。(デフォルト) mosaicWidth 正の整数 モザイクの幅。(ピクセル数。デフォルトは16) mosaicHeight 正の整数 モザイクの高さ。(ピクセル数。デフォルトは16) titles タイトル 各画像のタイトルを順番に"|"(縦棒)で区切って指定する。 一部を省略したい場合は、その箇所に"-"を指定する。 fontSize 正の整数 タイトルのフォントサイズ。(デフォルトは12) fontColor 6桁の16進数(RGB値) タイトルのフォントの色。(デフォルトはFFFFFF) fontShadowColor 6桁の16進数(RGB値) タイトルの影の色。 (省略した場合、影なし) fontBackColor 6桁の16進数(RGB値) タイトルの背景色。 (省略した場合、背景なし) fontLineColor 6桁の16進数(RGB値) タイトルのアンダーラインの色。 (省略した場合、アンダーラインなし) titleLocation タイトルの位置を表わすロケーション名。(デフォルトは"nw") nw 左上 n 上 ne 右上 c 中央 sw 左下 s 下 se 右下 target 任意の文字列 TextChangerのパラメータで設定したターゲット名。 TextChangerと連動させる場合、必須。 frame フレーム名 リンク先のページを表示させるフレームの名称。 HTMLのフレーム機能のtargetオプションと同じ意味。 _blank,_self,_parent,_topなどの特殊なフレーム名も指定可能。 autoLink true リンクページを自動的に表示する。 false 画像をクリックした時に、リンクページを表示する。(デフォルト)
■ appletタグで設定するパラメータ
名前 設定値 意味 code TextChanger.class アプレットの名前。(固定) width 正の整数 アプレットの横幅を指定する。(ピクセル数) height 正の整数 アプレットの縦幅を指定する。(ピクセル数) name 任意の文字列 ImageChangerと連動させるためのターゲット名。 ImageChangerの"target"というパラメータで、同じ名前を指定しなければならない。 ■ paramタグで設定するパラメータ
name value 意味 bgColor 6桁の16進数(RGB値) 背景色(デフォルトは、プラットフォームにより異なる。) fgColor 6桁の16進数(RGB値) 文字色(デフォルトは、白。) texts 任意の文字列 画像に対応する文章を、順番に"|"(縦棒)で区切って指定する。 一部を省略する場合は、その箇所に"-"を指定する。 改行が必要な場合は、"\n"を記述する。