今回は JavaScript 1.2 で使われるようになった Image オブジェクトを使ってみます。Image オブジェクトとは、画像ファイルをオブジェクトとしてブラウザのキャッシュに取り込み、JavaScript で参照・設定できるようにしたものです。 Netscape Navigator 3.0 以上、Internet Explorer 4.0 以上で動作します。（Internet Explorer 3.0x では動きませんので注意して下さい。）
すでにお気づきと思いますが、上のリンク一覧が他のページとは違っていますね。これは Internet Explorer 4.0x のツールボタン風に作ってみたものです。 ボタンにマウスカーソルが触れるとボタンのアニメの色がカラーになり、ボタンが浮き上がったように見えます。更にボタンを押すと、ボタンが引っ込むように見えます。 これはつまり１つのボタンに対して３種類の画像を用い、マウスカーソルがボタンに触れる・マウスが押される・マウスカーソルがボタンから離れるという３つのイベントに応じて表示する画像を取り替えているのです。 ボタンが浮き上がったり引っ込んだりするのは、（コンピュータの GUI 環境では当たり前のことですが）ただそう見えるに過ぎません。
画像を JavaScript で参照するためには Image オブジェクトを生成して、画像をこれに関係づける必要があります。これは一般に
- オブジェクト名 = new Image();
- オブジェクト名 . src = "画像ファイル名";
と書きます。Image(200,100) のようにカッコの中に数字を入れれば画像の横幅と縦幅をピクセル単位で定義することができます。
画像 ファイル名 外見 イベント Hh1.gif モノクロ・平板 onMouseOut Hi.gif カラー・凸状 onMouseOver Hhh1.gif カラー・凹状 onmousedown
上のリンク一覧のうち「ホーム」ボタンでは左の３つの画像を使っていますが、これらは次のように Image オブジェクトと関係づけています。
ImgA1=new Image();
ImgA1.src="images/H1.gif";
ImgA2=new Image();
ImgA2.src="images/Hh1.gif";
ImgA3=new Image();
ImgA3.src="images/Hhh1.gif";１つ１つの画像に対して Image オブジェクトを生成してやる必要があります。
ただこれだけではブラウザのキャッシュに画像が読み込まれるだけでページには表示されませんので、ページの BODY 内で IMG タグを使い、デフォルトの表示画像とデフォルトの表示位置を指定してやらなければなりません。
- <a href="Home.htm" onMouseOver="Over(1)" onMouseOut="Out(1)" onmousedown="Down(1)">
- <IMG SRC="Hh1.gif" border=0 NAME="gazo1"></a>
デフォルトの表示画像は onMouseOut（マウスカーソルが離れたら）で呼び出されるものと同じです。イベントの処理を IMG タグではなくリンクタグの中で呼び出しているのにお気づきと思います。 Internet Explorer なら IMG タグの中でもいいのですが、Netscape の場合、OnMouseOver や onMouseOut はリンク上でなければ反応しないからです。
マウスカーソルが画像に触れたら（onMouseOver）、Over() という関数を呼び出しています。別に関数を呼び出さずに onMouseOver="document.gazo1.src=ImgA1.src" のように書いても機能しますが、問題はブラウザのバージョンチェックです。 例えば Intenet Explorer 3.0x ではエラーになってしまいますので、あらかじめ関数を定義してバージョンチェックしなければなりません。
- if(Nr==1) document.gazo1.src=ImgA1.src;
- ・
- ・
- ・
} } 変数 Br にブラウザ名を、Ver にバージョンを代入し、IE 4.0 以降か NN 3.0 以降なら実行するという条件付けを
if((Br=="Microsoft Internet Explorer" && parseInt(Ver.substring(0,1))>3) || (Br=="Netscape" && parseInt(Ver.substring(0,1))>2))で行っています。
Over(1) のようにカッコ内に数字を入れたのは、上のリンク一覧のように関連する画像がたくさんあり、どれが onMouseOver されたかを判定するためで、画像が１つだけなら必要ありません。マウスカーソルが離れたら（onMouseOut="Out(1)"）やマウスが押されたら（onmousedown="Down(1)"）の場合も全く同工です（詳しくはソースを開いてみて下さい）。 ただ Netscape 3.0x は onmousedown には反応しません（エラーにもなりません）。
左のアニメーションを見て下さい。一見 Gif Animation を使っているように思われますが、実は JavaScript で動かしています。 ４つの画像を上に述べた要領で Image オブジェクトとして取り込み、タイマー・メソッドを使って３秒間隔でコマ送りしているのです。 JavaScript の便利なところは、Gif Animation 作成用のソフトが要らず、画像や設定の変更もスクリプトの書き換えだけで簡単にできることです。 また従来の Gif Animation だけではできなかったいろいろな工夫もできます。左のアニメーションの上にマウスカーソルを（クリックせずに）置くと、アニメーションがそこでストップします。 マウスカーソルを離すと再び動き始めます。また、あるコマの上でクリックすると、そのコマに関係するページにジャンプするようになっています。
