複数のイメージを１ヶ所で切り換え

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

戻る

実例

まぐろ えび あなご たまご

例文

<img name="sushi" src="ita.gif" width="32" height="32" border="0">
<a href="javascript:;" onMouseOver="msg(1)" onMouseOut="msg(0)">まぐろ</a>
<a href="javascript:;" onMouseOver="msg(2)" onMouseOut="msg(0)">えび</a>
<a href="javascript:;" onMouseOver="msg(3)" onMouseOut="msg(0)">あなご</a>
<a href="javascript:;" onMouseOver="msg(4)" onMouseOut="msg(0)">たまご</a>

<script type="text/javascript">
icon = new Array();

for (n=0; n<5; n++) { //*1
	icon[n] = new Image(); //*2
}

icon[0].src = "ita.gif"; //*3
icon[1].src = "maguro.gif"; //*4
icon[2].src = "ebi.gif";
icon[3].src = "anago.gif";
icon[4].src = "tamago.gif";

function msg(onoff) { //*5
	document.sushi.src = icon[onoff].src; //*6
}
</script>

解説

実に短く分かりやすくなりました。
for文（*1）では0～4までを繰り返し、画像用の変数を準備（*2）しています。
icon[0] は元に戻る画像（*3）です。以降がそれぞれのリンクに対応した画像（*4）です。

マウスを「Red」というリンクの文字に持っていくと、msg(onoff) に「1」が引き継がれます。（*5）
function 処理は１行だけです。画像の場所（G31）が１ヶ所だけですので、１行（*6）で終わってしまいます。画像の切換は引き継ぐ onoff の数字だけで行っています。

実はこの処理はメッセージをステータスやフォームに表示するのに似ています。ただ、メッセージの場合は事前に変数を用意せず、function の中で直接ステータスやフォームにメッセージを入れています。
画像は先に読み込んで切換の時間を節約しているのです。

さて、ここでもうひと工夫があります。リンクを押しても画面が変わらないようにする方法です。
onMouseOver を使おうと思うとどうしても<A>タグを使わなければなりません。しかも「HREF=""」を省略することもできないのです。
そこで、例文では「HREF="JavaScript:;"」としています。これはダミーと呼ばれるもので、実際はクリックするとJavaScriptを呼び出すときに使用するものですが、何も関数が書かれていないため実行せずに終わるようになっています。
ようするに何もするなという命令のような役割を果たしているのです。

応用

画像を切り換えても消す必要のない場合、icon[0]が不要となりますので、それに関連する部分を削除します。
・onMouseOut を使用しないので、これを全部消します。
・for文が0から始まるのでこれを1にします。（*1）→ for (n = 1; n <4; n++) {
・icon[0] は要らないので消します。（*3）

画像の数を増やして使う場合、icon[X] の変数を順に増やして行きます。（ここではX個とします。）
・icon[n] をX個準備する。（*1）→ for (n = 1; n <X+1; n++) {
・icon[0] から icon[X] までグラフィックファイルを用意する。（*3）
・onMouseOver を使ったリンクをX個まで取り付ける。

戻る