JavaScript には画像（イメージ）データを制御するための、 いくつかの方法が用意されています。

その１つは document オブジェクトの下に images オブジェクトがあり、 そのプロパティを利用する方法です。

Blue Banner
青いバナー
Red Banner
赤いバナー
Yellow Banner
黄色いバナー

上の画像は以下の HTML コンテキストによって表示されています。

<IMG src="images/title_b.png" name="blue" hspace=0 vspace=0 border=0>Blue Banner<BR>
青いバナー<BR>
<IMG src="images/title_r.png" name="red" hspace=5 vspace=5 border=1>Red Banner<BR>
赤いバナー<BR>
<IMG src="images/title_y.png" name="yellow" hspace=10 vspace=10 border=2>Yellow Banner<BR>
黄色いバナー

<INPUT type="button" value="画像数" onClick="alert(document.images.length)">

document.images.length は文書中の画像数を返します。 ここではページ下の２つの矢印も画像に含まれるので結果は 5 となります。

<INPUT type="button" value="画像のアドレス" onClick="var imgs = ''; for(i = 0; i < document.images.length; i++) imgs += document.images[ i ].src +' \n'; alert(imgs)">

document.images[画像番号].src は画像のアドレスを返します。 画像番号とはページの一番最初の画像を 0 として数えた番号です。 画像の name が設定されている場合は document.画像名.src でも同じ結果が得られます。

<INPUT type="button" value="画像名" onClick="var imgs = ''; for(i = 0; i < document.images.length; i++) imgs += document.images[ i ].name +' \n'; alert(imgs)">

document.images[画像番号].name は <IMG> タグの name 属性で設定した値を返します。

<INPUT type="button" value="画像サイズ" onClick="var imgs = ''; for(i = 0; i < document.images.length; i++) imgs += 'height=' + document.images[ i ].height + ' ;width=' + document.images[ i ].width +' \n'; alert(imgs)">

document.images[画像番号].height と document.images[画像番号].width は画像の高さと幅を返します。

<INPUT type="button" value="画像と文字の間のスペース" onClick="var imgs = ''; for(i = 0; i < document.images.length; i++) imgs += 'hspace=' + document.images[ i ].hspace + ' ;vspace=' + document.images[ i ].vspace +' \n'; alert(imgs)">

document.images[画像番号].hspace と document.images[画像番号].vspace は<IMG> タグの hspace 属性と vspace 属性で設定した値を返します。

<INPUT type="button" value="画像の枠幅" onClick="var imgs = ''; for(i = 0; i < document.images.length; i++) imgs += document.images[ i ].border +' \n'; alert(imgs)">

document.images[画像番号].border は<IMG> タグの border 属性で設定した値を返します。

document.images にはまたcomplete プロパティと onabort、onerror、onload というイベントがあり、 これらによって画像が正常に読み込まれたかどうかを調べることが出来ます。例えば、

<SCRIPT for="window" event="onload" type="text/javascript">
<!--
  var errormsg = "";
  for (i = 0; i < document.images.length; i++) {
    document.images[ i ].onerror = errormsg += document.images[ i ].src +"\n";
  }
  alert("以下の画像読み込みに失敗\n" + errormsg);
//-->
</SCRIPT>

のようなソースをページの任意の位置に入れておくこともできます。

画像を制御するもう一つの方法を紹介しましょう。それは Image オブジェクトの生成です。 画像を動的に切り替えたいとき、マウスクリック、マウスオーバー、 或いはタイマーのようなイベントで次のようにして画像を入れ替えることが出来ます。

document.image1.src = "images/title_b.png";

しかし画像のサイズが大きく、また数がたくさんあるというようなとき、このようにいちいち画像のアドレスを呼び出していたのでは、 画像読み込みに時間がかかってしまいます。このオーバーヘッドを解決するには、画像をあらかじめバックグラウンドで読み込んでおくことです。

画像をバックグラウンドで読み込んでおくには Image オブジェクトを生成して、そのアドレスを指定しておきます。

blue = new Image( );
blue.src = "images/title_b.png";

画像がたくさんあるときはこの方法を繰り返します。画像入れ替えの際には画像のアドレスを指定する代わりに、 あらかじめ宣言しておいた Image オブジェクトの src を指定してやれば良いのです。

document.image1.src = blue.src;

実際の用例は以前に紹介した Sample 2 を参考にしてみて下さい。

Sample 2
「青」「赤」「黄」の上にマウスを当ててみて下さい。
ソース <SCRIPT type="text/javascript"> <!-- ao = new Image(); ao.src="images/title_b.png"; aka = new Image(); aka.src="images/title_r.png"; ki = new Image(); ki.src="images/title_y.png"; function SetColor(color) { document.tfp.src = color.src; } //--> </SCRIPT> <A href="04.htm" onMouseover="SetColor(ao)"><IMG src="images/blue.png"></A> <A href="04.htm" onMouseover="SetColor(aka)"><IMG src="images/red.png"></A> <A href="04.htm" onMouseover="SetColor(ki)"><IMG src="images/yellow.png"></A> <IMG name="tfp" src="images/title_b.png">