ＪａｖａＳｃｒｉｐｔ講座(Vol.19)

ＪａｖａＳｃｒｉｐｔ講座
（メールマガジン編）

１１/１７日発行　ヨッシーの”ホームページを作ろう！（JavaScript編）”★Vol.19★

画像を扱ったプログラムⅡ

今回も前回に続き、画像を使ったプログラムをやっていこう。
今回はフォームの選択メニューを使った画像の切り替えをやってみようね。

★ 選択メニューを使った画像切り替え ★

まず、画像をフォームの選択メニューを使って切り替える方法をやってみよう。
今回は以前(vol.16)やったビルドインオブジェクトの考え方がでてくるんだ。

まずプログラムを見てみよう。

--選択メニューで画像を切り替える--

<HTML>
<HEAD>
<TITLE>画像切り替え１</TITLE>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
選択メニューから好きな画像を選択してね
<hr>
<form name="form">
<select name="select">
<option>画像１
<option>画像２
<option>画像３
<option>画像４
<input type="button" value="決定" onClick="change()">
</form>
<p>
<img border=1 src="img1.gif" name="myImg">
</BODY>
</HTML>

サンプル

--解説--

<HTML>
<HEAD>
<TITLE>画像切り替え２</TITLE>
<SCRIPT language="JavaScript">

</SCRIPT>

ここで一番大事(というか新しいのはここだけ)なのは、

    no = document.form.select.selectedIndex;

の１文なんだ。

選ばれたセレクトボックスの場所を返す

document.フォーム名.セレクトボックス名.selectedIndex

ここで、以前やったビルドインオブジェクトというものを思い出してみよう。
とりあえず、上の１行の意味は、「"no"という変数に"document.form.select.selectedIndex"の値を入れる」という意味だね。
つまり、"document.form.select.selectedIndex"の部分の意味がわかれば、この１行の働きがわかるよね。

    document.form.select.selectedIndex

これは、"."でつながっているので、ビルドインオブジェクトと考えよう。
じゃあ、１つずつ内容を見てみよう。

    document ：ブラウザの表示部分
    form ：formという名前の部分(フォームの名前として決めた)
    select ：selectという名前の部分(セレクトボックスの名前として決めた)
    selectedIndex :セレクトボックスの上から0,1,2,3....という値を返す

つまり、以前も言ったように、ビルドインオブジェクトというのは、ある場所を指定するときに１つずつ場所をたどって指定しているんだ。
今の場合だと、

    ブラウザの表示部分にある
　　    　　↓
    "form"という名前のフォームの
　    　　　↓
    "select"という名前のセレクトボックスの
　    　　　↓
    選んだものによって値を返す。（selectedIndex）

    ※よくわからない人は、上のプログラムと見比べてみよう

selectedIndexには上から0,1,2,3....という値が設定されているんだ。
つまり、セレクトボックスの中の、
１番上にある"画像１"には"0"、
２番目にある"画像２"には"1"、
３番目にある"画像３"には"2"、
　　・
　　・
　　・
という値が入っているので、選んだ画像によって、そこに入っている"0"、"1"、"2"が返ってくるんだ。
もう少し簡単に言うと、
"画像１"を選ぶと"0"が
"画像２"を選ぶと"1"が
"画像３"を選ぶと"2"が
　　・
　　・
　　・
返ってくる。
ということなんだ。
ここまでで、document.form.select.selectedIndexの話は終わり。
だから、no = document.form.select.selectedIndex;というのは、選んだ画像によってnoに入る数字が変わるということだね。
そして、そのあとでif文でnoによって表示する画像を場合分けしているんだ、
（※if(no == 0){document.myImg.src="img1.gif";}・・・の部分）

＜問題＞
[命令]のところを埋めて、
画像の上にマウスを移動させると、
その画像の説明をテキストボックスに表示するようなプログラムを作れ。
※テキストボックスに文字を表示する方法は、

テキストボックスに文字を表示

document.フォーム名.テキストボックス名.value = "表示したい文字列"

※余力があれば、下のLevel2とLevel3もやってみよう。

～Level.1～
１つの画像を用意して、その画像にマウスを乗せると説明を表示

～Level2～
複数の画像を用意して、その画像にマウスを移動させると説明を表示

～Level3～
複数の画像を用意して、その画像にマウスを移動させると説明を表示。
また、画像からカーソルが外れると説明も消す。(または元の文章に戻す)
※ヒントVol.8

<HTML>
<HEAD>
<TITLE>画像の説明</TITLE>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<form name="myForm">
<input type="text" name="myText" siz="20" value="画像の説明">
</form>
<img border=0 src="img1.gif" [命令]>
</BODY>
</HTML>