ラジオボタンでBGMをえらんでもらいましょう
表示の例
OFF
 ラジオボタンを押すと、えらんだBGMが流れます。
このページは、フレームによって上下に分割されています。しかし、プロパティで上部フレームを100%にしてありますから、下部のフレームは画面上に表示されません。
上部のフレームに、BGMをえらぶラジオボタンのある「メイン」のページを表示させ、下部のフレームに、BGMを流すソースがある5つの「BGM用のページ」を、ラジオボタンのリンクによって入れかえます。(OFF用のページを含めると6ページです)
下の「フレームページのソース」を貼り付けて、フレームページを作ってください。
フレームページのソース
<html>
<head>
<title>ラジオボタンでBGMをえらんでもらいましょう</title>
</head>
<frameset rows="100%,*" framespacing="0" border="0" frameborder="0">
<frame name="main" src="java_bgm_main.html" scrolling="auto">
<frame name="bottom" src="java_bgm_off.html">
<noframes>
<body>
<p>このページにはフレームが使用されていますが、お使いのブラウザではサポートされていません。</p>
</body>
</noframes>
</frameset>
</html>
<frameset rows="100%,*" framespacing="0" border="0" frameborder="0"> のところが、ページを上下に分割して上部のフレームの割合を100%に設定しているところです。
<frame name="main" src="java_bgm_main.html" scrolling="auto"> のところは、上部のフレームに表示される「メイン」のページを設定しているところです。java_bgm_main.html を、これから作る「メイン」のページのファイル名にかえてください。
<frame name="bottom" src="java_bgm_off.html"> のところは、下部のフレームに表示される「BGM用のページ」を設定しているところです。ここでは java_bgm_off.html という、ラジオボタンがOFFの時のページのファイル名にしています。このファイル名を、これから作るOFF用のページのアドレスにかえてください。
それでは「メイン」のページを作りましょう。「メイン」のページには、ラジオボタンを取り付けますから、表示させたい場所にプログラムAのソースを貼り付けてください。
プログラムAのソース
<FORM>
<CENTER>
<INPUT type="radio" name="RB" onClick="parent.bottom.location.href='java_bgm_off.html'" checked>OFF
<INPUT type="radio" name="RB" onClick="parent.bottom.location.href='java_bgm_1.html'">1
<INPUT type="radio" name="RB" onClick="parent.bottom.location.href='java_bgm_2.html'">2
<INPUT type="radio" name="RB" onClick="parent.bottom.location.href='java_bgm_3.html'">3
<INPUT type="radio" name="RB" onClick="parent.bottom.location.href='java_bgm_4.html'">4
<INPUT type="radio" name="RB" onClick="parent.bottom.location.href='java_bgm_5.html'">5
</CENTER>
</FORM>
プログラムAのソースの3行目は、ラジオボタンがOFFの場合のリンク先のところです。下のソースを参考にOFF用のページを作ります。そして java_bgm_off.html をあなたが作ったOFF用のページのアドレスにかえてください。
OFF用のページのソース
<html>
<head>
<title>BGM OFF</title>
</head>
<body>
</body>
</html>
プログラムAのソースの4行目から8行目は、ラジオボタンの1から5までのリンク先のところです。下のソースを参考に「BGM用のページ」を作ってください。そして java_bgm_1.html などをあなたが作った「BGM用のページ」のアドレスにかえてください。
BGM用のページのソース
<html>
<head>
<title>BGM1</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript"> 
<!--
if (document.all){
document.write('<BGSOUND SRC="midi/6miles.mid" LOOP="infinite">');
}else{
document.write('<EMBED SRC="midi/6miles.mid" AUTOSTART="true" LOOP="true" HIDDEN="true" TYPE="audio/midi">');
}
//-->
</SCRIPT>
</body>
</html>
BGMファイルは、BGSOUND SRC="midi/6miles.mid" と EMBED SRC="midi/6miles.mid" のところの midi/6miles.mid を、あなたが使ってみたいBGMのファイル名にかえてください。
「メイン」のページには、BGMのラジオボタンのほかに、色々なリンクを作られると思いますが、フレームを使用しているために、リンクのターゲットの設定によっては、上部のフレームのみページが切りかわります。
ページが切りかわってもBGMを流し続ける場合は、特にターゲットを指定しなくてもいいのですが、フレームを解除してリンクさせる場合もあると思います。(BGMは流れなくなります)
その場合、文字や画像にリンクを設定している場合は、<a href="java_top.html" target="_top">TOPページへ</a> のように、ターゲットを target="_top" にしてください。
フォームのボタンなどでリンクさせている場合は、onClick="top.location.href='java_top.html'" のように top.location.href にしてください。
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ