<HTML>
<HEAD>
<TITLE>画像切り替え１</TITLE>
<SCRIPT language="JavaScript">
function Img(n){
document.myImg.src="img"+n+".gif";
}
</SCRIPT>
</HEAD>
<BODY>
ボタンを押して好きな画像を選んでね！
<hr>
<input type="button" value="画像１"
onClick="Img(1)"><br>
<input type="button" value="画像２"
onClick="Img(2)"><br>
<input type="button" value="画像３"
onClick="Img(3)"><br>
<input type="button" value="画像４"
onClick="Img(4)"><br>
<p>
<img border=1 src="img1.gif" name="myImg">
</BODY>
</HTML>
サンプル--解説--
<HTML>
<HEAD>
<TITLE>画像切り替え１</TITLE>
<SCRIPT language="JavaScript">
function Img(n){ ←画像を切り替える関数
document.myImg.src="img"+n+".gif";
}
</SCRIPT>
</HEAD>
<BODY>
ボタンを押して好きな画像を選んでね！
<hr>
<input type="button" value="画像１"
onClick="Img(1)"><br>
<input type="button" value="画像２"
onClick="Img(2)"><br>
<input type="button" value="画像３"
onClick="Img(3)"><br>
<input type="button" value="画像４"
onClick="Img(4)"><br>
<p>
<img border=1 src="img1.gif" name="myImg"> ←画像を表示する(場所名"myImg")
</BODY>
</HTML>
まず、HTMLの部分を見てみよう。
この中でわかりやすいのはフォームのボタンだね。
ここでまずボタンを配置しているんだ。
次に、画像をその下に置いているね。
ここからがJavaScriptの説明になっていくんだけど、
まず、
<img border=1 src="img1.gif" name="myImg">
の中にあるnameという部分。
ここから説明しよう。
これはこの画像を置いている場所を示しているんだ。
つまり、この画像を置いている位置に自分で好きな名前を付けることができるんだね。
このあと、画像を切り替えたりする時は、この名前をつかってこの位置にある画像を扱っていくんだよ。
とりあえず、今回はこの画像の位置に"myImg"という名前を付けておこう。
次に、ボタンを見てみよう。
ボタンによって画像を切り替えるわけだから、
onClickを使って、ボタンを押した時にある処理をしないといけないね。
その時に行う処理が、onClickの中にある"Img(2)"とかいう処理なんだ。
ここで、関数というものを思い出してほしいんだけど、(←vol.6,vol9)
Imgというのが関数で、1や2というのが引数というものなんだ。
この場合、"Img(2)"というのは"2"という数字を持って関数を実行してきてください、という意味になるんだね。
じゃあ、実際に関数を見てみると、function
Img(n)という形になっているね。
これは関数のところでやったように、"Img"という名前の関数だね。
そして引数が"n"となっているんだ。
じゃあ、ここでさっきの"Img(1)"と今の"Img(n)"比べてみると、"n"の部分に"2"を持ってきたことになるね。
だから今回の場合、関数の中の"n"は"2"、つまり、n=2としてプログラムを見ていくことになるんだ。
（関数の中身）
function Img(n){
document.myImg.src="img"+n+".gif";
}
じゃあ、関数の中身を見てみると。
document.myImg.srcという命令が出ているね。
さっきやったように、
"document.myImg.src"というのは"myImg"という場所にあるURLを示しているので、
これを変更するということは、"myImg"にある画像を変更することになるんだ。
（※"myImg"とはさっき名前を付けた画像。上を見よ。）
ここで、
document.myImg.src="img"+n+".gif";
という風になっているね。
今は"Img(2)"として、"n=2"となっていたので。
このプログラムは変数を展開して、
document.myImg.src="img2.gif";
という風になるんだ。
だから、これで"myImg"にあった画像が、ボタンを押されることによって"img2.gif"に変わったんだ。
その場所にある画像のURLを変えるということは、当然その場所にある画像の表示も変わるということだよね。
実際に、このプログラムを写して(できれば自分で)やってみよう。
画像は自分で用意してね。
(※画像が無い人は、僕のページから勝手に取っていってください)
