ドロップダウンメニューからリンクさせよう(新しいウインドウ)
表示の例
  ★ メニュー ★ の横の ▼ ボタンを押すと、ドロップダウンメニューが表示されます。
その中からクリックしてえらび、GO! のボタンを押すと、新しいウインドウへリンクします。
プログラムAのソースをコピーして、ドロップダウンメニューを表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムAのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function MyLink(){
alink=document.flink.slink;
mlink=alink.options[alink.selectedIndex].value;
if(mlink!="-"){
window.open(mlink,"","toolbar=yes,menubar=yes,location=yes,status=yes,scrollbars=yes,resizable=yes");
}
}
//-->
</SCRIPT>
<FORM method="post" name="flink">
<select name="slink">
<OPTION selected value="-">     ★ メニュー ★</OPTION> 
<OPTION value="-">------------------------</OPTION> 
<OPTION value="java_tokei1.html">時計の色と大きさをかえてみよう</OPTION>
<OPTION value="java_hizuke.html">今日の日付を表示させよう</OPTION>
<OPTION value="java_alert1.html">ボタンでアラートを表示させよう</OPTION>
<OPTION value="java_back1.html">ボタンで背景の色をかえてみよう</OPTION>
<OPTION value="java_link1.html">ボタンでリンクさせよう</OPTION>
<OPTION value="-">------------------------</OPTION> 
</select>
<INPUT type="button" value="GO!" onClick="MyLink()"> 
</FORM>
<OPTION value="java_tokei1.html">時計の色と大きさをかえてみよう</OPTION> などと書いてある所がリンク先を指定しているところです。
value="java_tokei1.html" の java_tokei1.html がリンク先のアドレス(ファイル名)で、時計の色と大きさをかえてみよう がドロップダウンメニューに表示される文字です。この部分を、あなたのリンクさせたいアドレスやメニューにかえてください。
ボタンに表示される文字は value="GO!" の GO! をあなたの好きな文字にかえてください。
ボタンのないドロップダウンメニューのソースは下のようになります。こちらはメニューから選んだだけでジャンプします。
ボタンなしタイプのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function Mylink(Sel){
mlink=Sel.options[Sel.selectedIndex].value;
if(mlink!="-"){
window.open(mlink,"","toolbar=yes,menubar=yes,location=yes,status=yes,scrollbars=yes,resizable=yes");
}
}
//-->
</SCRIPT>
<FORM method="post">
<select onChange="Mylink(this)">
<OPTION selected value="-">     ★ メニュー ★</OPTION> 
<OPTION value="-">------------------------</OPTION> 
<OPTION value="java_tokei1.html">時計の色と大きさをかえてみよう</OPTION>
<OPTION value="java_hizuke.html">今日の日付を表示させよう</OPTION>
<OPTION value="java_alert1.html">ボタンでアラートを表示させよう</OPTION>
<OPTION value="java_back1.html">ボタンで背景の色をかえてみよう</OPTION>
<OPTION value="java_link1.html">ボタンでリンクさせよう</OPTION>
<OPTION value="-">------------------------</OPTION> 
</select>
</FORM>
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ