イメージ切替表示

子供の写真を自動的に表示しながら、コメントも表示するというものを作りたくなって作りました。

こういうことをできるとても有名なプログラムでJavaで作成されたアプレットImageViewerがあります。最初はこれをホームページに使用しようと考えました。しかし、Proxy経由のネットワークからはうまく動作しませんでした。会社の同僚などはProxyを使用した環境でイントラネットから見るので、このアプレットを使用することをあきらめました。そこで、JavaScriptならどうだろうと勉強の意味も含めて作った最初のJavaScriptの作品です。

サンプル

子供の写真です。ホームページではフレームに入れて表示しています。

特徴

ビットマップを数秒ごとに切替ながら、コメントを表示します。コメントには日本語も使用可能です。

ImageViewerと違って表示時の効果などはまだありません。しかし、Proxy経由のネットワークからでも見ることができます。

ビットマップ部分のみを切り替えているので、IMGタグのWIDTHやHEIGHTを表示後に変更できません。これはイメージを代えるときにそのフレームをリロードすれば可能かもしれません。それで、横長の写真と縦長の写真を別のフレームで表示しています。

コメントの表示は一応センタリングをして表示するようにしているつもりですが、フォントの指定などでそうならない場合もあります。

注意

イメージを表示してから次のイメージをロードするようにしたつもりですが、サーバーのレスポンスが悪かったりすると、コメントの文字のみ先にでて数秒してから画像が表示されてしまいます。

使用方法

• 前準備
  • <SCRIPT SRC="971103.js"></SCRIPT>
    　このファイルにはビットマップとコメントのリストを作成します。
    <SCRIPT SRC="Imagechg.js"></SCRIPT>
    　このファイルには関数animate()が記述されています。もともとはアニメーションのサンプルから変更して作成したのでこんな名前になっています。
• イメージ指定
  • <IMG name="animation" height="257" width="180" onLoad="setTimeout('animate()',delay)">
• リストの例 (971103.js)

//
delay=3000;　 <=== 写真切替の時間をmsecで指定します。例では３秒です。
TotalNum=5; <=== ビットマップファイルの数を指定します。
imageDir="image/"; <=== ビットマップファイルの入っているディレクトリを指定します。
//
imageName=new Array();
imageName[1]="971102.jpg"; <===ビットマップファイル名を書き込みます。
imageName[2]="971103.jpg";
imageName[3]="971113.jpg";
imageName[4]="971114.jpg";
imageName[5]="971137.jpg";
//
Messages=new Array();
Messages[1]="100円市のおもちゃ1"; <===コメントを書き込みます。
Messages[2]="100円市のおもちゃ2";
Messages[3]="らいおんまる3";
Messages[4]="らいおんまる4";
Messages[5]="空飛ぶ ひろ坊";

今後の拡張予定

縦と横の写真用のHTMLを別々に作成するのは結構面倒で、しかも縦の写真は横に比べて少なかったりもするので、これらを同じHTMLで表示できるようにしようと思っています。イメージを切り替えるときにフレームをリロードすればできそうですね。

Netscape V4などで拡張されたLayerの機能を使えば、イメージがカーテンの様に表示できるようになります。現在これを検討中です。ただ、MicrosoftのIEでは動かないでしょうね。ブラウザによって分岐するようにしないといけませんね。実はまだしていないんです。