3. ドロップダウンメニューで画像が変わる（JavaScript）

説明
　ドロップダウンメニューで画像が変わるJavaScriptだ。ひとつのページに画像をたくさん並べると、ダウンロードに時間がかかり、訪問者にとってストレスになる。このJavaScriptを使えば、初めに表示される画像はひとつだけであり、スマートなページにできるだろう。
　まず【図3-1】を<HEAD>〜</HEAD>に含めよう。この部分で、ドロップダウンメニューに反応して切り替わる画像を指定することになる。　「img0〜4.src="xxxxxx.gif"」が、切り替わる画像の指定である。0〜4で計5つの画像がドロップダウンメニューで選択可能ということになるが、6つの画像を選択可能にしたい場合は0〜5、7つの画像を選択可能にしたい場合は0〜6といったように、画像数に合わせて数値を変更する必要がある。ちなみに、画像はなるべく同じ大きさのものがよいだろう。
　次に【図3-2】は<BODY>〜<BODY>に含めるソースだ。「<FORM>〜</FORM>」でフォーム領域を確定させ（<SELECT>はフォーム要素のひとつであるため）、「<IMG src="red.gif"」でページを読みこんだときに表示される画像（初期画像）を指定、「<SELECT onchange="imgChange(this)">」で【図3-1】のソースと連動させる。最後に【図3-1】の中で指定した画像をドロップダウンメニューで切り替えるために、各メニューに<OPTION value="0">から<OPTION value="4">という値をつける。　

　

図3-1

　

図3-2

　

表示例