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

表示の例

パンダ ペンギン ねこ ねずみ ライオン

動物の名前の前にあるラジオボタンにチェックを入れると、その動物の画像が表示されます。

プログラムＡのソースをコピーして、画像とラジオボタンを表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。

プログラムＡのソース <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>

プログラムＡの上から９行目の src="images/icons1.gif" の images/icons1.gif がページが開いた時に表示されたパンダの画像ファイル名になっていますから、あなたがまず最初に表示したい画像のファイル名にかえてください。

この images/icons1.gif は大きさが、よこ３２ピクセル、たて３２ピクセルの画像ですから、width="32" height="32" となっています。この 32 と 32 は、あなたの選んだ画像の大きさにかえてくださいね。

画像の大きさは、できるだけ同じがいいと思います。すべての画像は、この部分で指定した画像の大きさで表示されます。

下から７行目からは、５つの画像のファイル名とボタンのところに表示する名前が書いてあります。

７行目の onClick="Gazou('images/icons1.gif')" の images/icons1.gif をあなたがまず最初に表示させたい画像のファイル名にしてください。

そして次の行からは、それぞれ表示させたい画像のファイル名にして、ペンギン や ねこ などの文字を表示する画像の名前などにかえてください。

ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。

５・６年生にもわかるやさしいJavaScriptのTOPへ