画像切り替える&画像何千枚でもコード増やさない方法
html上に表示させた画像をクリックすると、画像を切り替えるプログラムを作りたいのですが、
うまく動作しません。
１つ目の質問は、
document.images[]の方法もありますが、正しくなく互換がないそうなので使いたくありません。
document.getElementById()で画像を切り替えるにはどうしたらいいのでしょうか？
２つ目の質問ですが、
このプログラムは6枚の画像が切換えの対象になっていますが、
これが300枚とかになるとプログラムが増えて大変です。
GAZO[0] = new Image(50,50); GAZO[0].src = "0.jpg";
という風にしているところを
var GAZO = new Array();
for(n=0; n<6; n++){
GAZO[n] = new Image(50,50); GAZO[n].src = "n.jpg";
}
という風にすればできると思ったのですが、できませんでした。
n.jpgが""で囲まれて変数のnがただの文字列と見られているのかもと思い、
'GAZO[n] = new Image(50,50); GAZO[n].src = '+'"'+n+'.jpg'+'"';
このようにしてみましたがダメでした。
画像の枚数が何千枚になってもプログラムが増えない方法はありますか？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<script type="text/javascript">
<!--
var Bifor = new Array();
Bifor[0] = new Image(50,50); Bifor[0].src = "befor0.jpg";
Bifor[1] = new Image(50,50); Bifor[1].src = "befor1.jpg";
Bifor[2] = new Image(50,50); Bifor[2].src = "befor2.jpg";
Bifor[3] = new Image(50,50); Bifor[3].src = "befor3.jpg";
Bifor[4] = new Image(50,50); Bifor[4].src = "befor4.jpg";
Bifor[5] = new Image(50,50); Bifor[5].src = "befor5.jpg";
function first(){
for(i=0; i<6; i++){
'document.getElementById("after' + i + '").src' = Bifor[i].src;
}
}
var GAZO = new Array();
GAZO[0] = new Image(50,50); GAZO[0].src = "0.jpg";
GAZO[1] = new Image(50,50); GAZO[1].src = "1.jpg";
GAZO[2] = new Image(50,50); GAZO[2].src = "2.jpg";
GAZO[3] = new Image(50,50); GAZO[3].src = "3.jpg";
GAZO[4] = new Image(50,50); GAZO[4].src = "4.jpg";
GAZO[5] = new Image(50,50); GAZO[5].src = "5.jpg";
function change(m){
'document.getElementById("after' + m + '").src' = GAZO[m].src;
}
//-->
</script>
</head>
<body onload="first()">
<form name="jirei" action="#"> //actionは必須。しかしに他に入れるものがないので便利な#を入れる
<GAZO src="title.jpg">
<table>
<tr>
<td><img src="befor0.jpg" width="50" height="50" id="after0" onclick="change(0)"></td>
<td><img src="befor1.jpg" width="50" height="50" id="after1" onclick="change(1)"></td>
<td><img src="befor2.jpg" width="50" height="50" id="after2" onclick="change(2)"></td>
</tr>
<tr>
<td><img src="befor3.jpg" width="50" height="50" id="after3" onclick="change(3)"></td>
<td><img src="befor4.jpg" width="50" height="50" id="after4" onclick="change(4)"></td>
<td><img src="befor5.jpg" width="50" height="50" id="after5" onclick="change(5)"></td>
</tr>
</table>
<input type="button" value="元に戻す" onclick="first()">
</form>
</body>
</html>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
再びの回答ありがとうございます。見えたようでよかったです。削除されるとは知りませんでした(笑）