見たい画像を選んでください。
フォームのセレクトオプションを選択すると画像が切り替わります。NN3.0,IE4.0から使えます。
応用 :
画像を取り替えたり増やしたりして使ってみてください。
参照 : バージョンチェックif(navigator.appVersion.charAt(0)>=バージョン番号){命令}, new, Array(), Image(), function, 変数, src, document.images[], onChange, selectedIndex,
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
//イメージの事前読み込み
if(document.images){
movimg=new Array()
movimg[0] = new Image() ; movimg[0].src = 'HATUHI.GIF';
movimg[1] = new Image() ; movimg[1].src = 'HAKEN.GIF';
movimg[2] = new Image() ; movimg[2].src = 'BOTAN.GIF';
movimg[3] = new Image() ; movimg[3].src = 'ISHI.GIF';
}
/*
画像を増やす時は HTML内の
<input type="button" VALUE=' xxxx '
onClick="changImg1('view',x)" >
を増やすとともに
上記へ
movimg[4] = new Image();movimg[4].src='xx.GIF';
movimg[5] = new Image();movimg[5].src='xx.GIF';
.......
という風に追加してください。
*/
//画像の書き換え
function changImg1(imgName,imgNo){
if(document.images) document.images[imgName].src = movimg[imgNo].src
}
//-->
</script>
</head>
<body>
<img name="view" src="HATUHI.GIF"><br>
<form name="f1";>
<select name="s1"
onChange="changImg1('view',f1.s1.selectedIndex)">
<option>大仏と初日
<option>発遣門
<option>牡丹の小径
<option>十方堂の庭石
</select>
</form>
見たい画像を選んでください。
</body>
</html>
説明はK01も参照してくださいonChange="命令文"でフォームの入力内容が変更されたら"命令文"を実行するという意味です。select,text,textareaで使用できます
f1.s1.selectedIndexはf1という名前のフォームの中の、s1という構成要素(この場合はSELECTタグ)の中のOPTIONの何番目が選ばれたかを0から始まる番号で返します
/*** * M E M O */ A02やA03などの if(document.images) document.images[imgName].src = movimg[imgNo].src はA01の if(document.images){ document.images[imgName].src = movimg[imgNo].src ; } と同じ意味です。命令文が複数の場合は{}でくくる必要がありますが、 このように命令文がひとつのときは{}でくくらなくてもif(分岐)の 分岐が真なら後ろの命令文が実行されます使用している画像:
HAKEN.GIF
BOTAN.GIF
ISHI.GIF
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)