ラジオボタンで表示する画像をかえてみよう
表示の例

パンダ ペンギン ねこ ねずみ ライオン
 動物の名前の前にあるラジオボタンにチェックを入れると、その動物の画像が表示されます。
プログラムAのソースをコピーして、画像とラジオボタンを表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムAのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function Gazou(mysrc){
document.myIMG.src=mysrc;
}
//-->
</SCRIPT>
<center>
<img name="myIMG" src="images/icons1.gif" border="0" width="32" height="32">
<br>
<FORM>
<INPUT type="radio" name="myRB" onClick="Gazou('images/icons1.gif')" checked>パンダ
<INPUT type="radio" name="myRB" onClick="Gazou('images/icons2.gif')">ペンギン
<INPUT type="radio" name="myRB" onClick="Gazou('images/icons3.gif')">ねこ
<INPUT type="radio" name="myRB" onClick="Gazou('images/icons4.gif')">ねずみ
<INPUT type="radio" name="myRB" onClick="Gazou('images/icons5.gif')">ライオン
</FORM>
</center>
プログラムAの上から9行目の src="images/icons1.gif" の images/icons1.gif がページが開いた時に表示されたパンダの画像ファイル名になっていますから、あなたがまず最初に表示したい画像のファイル名にかえてください。
この images/icons1.gif は大きさが、よこ32ピクセル、たて32ピクセルの画像ですから、width="32" height="32" となっています。この 32  32 は、あなたの選んだ画像の大きさにかえてくださいね。
画像の大きさは、できるだけ同じがいいと思います。すべての画像は、この部分で指定した画像の大きさで表示されます。
下から7行目からは、5つの画像のファイル名とボタンのところに表示する名前が書いてあります。
7行目の onClick="Gazou('images/icons1.gif')" の images/icons1.gif をあなたがまず最初に表示させたい画像のファイル名にしてください。
そして次の行からは、それぞれ表示させたい画像のファイル名にして、ペンギン や ねこ などの文字を表示する画像の名前などにかえてください。
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ