複数の同じイメージを切り換え

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

実例

例文

<image name="image1" src="arrow_yellow.gif" width="8" height="8" border="0"><a href="javascript:;" onMouseOver="msg(1,0)" onMouseOut="msg(1,1)">１つ目のページへ移動</a><br>
<image name="image2" src="arrow_yellow.gif" width="8" height="8" border="0"><a href="javascript:;" onMouseOver="msg(2,0)" onMouseOut="msg(2,1)">２つ目のページへ移動</a><br>
<image name="image3" src="arrow_yellow.gif" width="8" height="8" border="0"><a href="javascript:;" onMouseOver="msg(3,0)" onMouseOut="msg(3,1)">３つ目のページへ移動</a>
 
<script type="text/javascript">
icon = new Array();
icon[0] = new Image();
icon[1] = new Image();
icon[0].src = "arrow_red.gif"; //*1
icon[1].src = "arrow_blue.gif"; //*2

function msg(num,onoff) {
	if (num == 1) document.image1.src = icon[onoff].src; //*3
	if (num == 2) document.image2.src = icon[onoff].src;
	if (num == 3) document.image3.src = icon[onoff].src;
}
</script>

解説

画像の数が少なければその分スクリプトは短くなります。
今回は icon[0]（*1）とicon[1]（*2）を共有して使いますので、画像の指定も読み込みも２行だけです。

function の中はあまり変わりません。ただ、２種類だけなので計算式がいらなくなっています。
画像の番号を指定するために、画像の数だけ if文は必要です。呼び出す画像の番号が onoff によって切り換わるだけです。

応用

functionの内容を１行にまとめることも出来ます。
これならば入れ替えしたいイメージが全て同じ場合に、複数のイメージを全て同じように入れ換えることが出来ます。

function msg(num,onoff) {
	document.images["image" + num].src = icon[num].src;
}

images[ "G"+num]の部分が、この名前のイメージですよという意味になっていて、<IMG>内のNAMEオプションの名前に対応します。今回は「G1」「G2」「G3」という名前なので「G」の後ろにnumで取ってきた数字を継ぎ足しています。このnumに入る数字は同じものがあると正しく動作しないので注意してください。

画像も複数ある場合は、前項のサンプルでやった画像を１つの式で切り換えるものに応用します。前項のサンプルを改良すると以下のようになります。

function msg(num,onoff) {
	document.images["image" + num].src = icon[num+10*onoff].src;
}

計算式に合うように<img>のNAMEオプションや画像の番号を用意する必要があり、計算式が複雑で分からないという方は、この応用はせずに１つ１つの切換の文を書いておいた方が良いでしょう。

戻る