ドロップダウンメニューからリンクさせよう(複合バージョン)
表示の例
  ★ メニュー ★ の横の ▼ ボタンを押すと、ドロップダウンメニューが表示されます。
その中からクリックしてえらび、GO! のボタンを押すとリンクします。
えらんだメニューによって、同じウインドウや新しいウインドウへリンクをします。
プログラムAのソースをコピーして、ドロップダウンメニューを表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムAのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function MyLink(){
alink=document.flink.slink;
mlink=alink.options[alink.selectedIndex].value;
blink1="java_hizuke.html";
blink2="java_back1.html";
if(mlink!="-" && mlink!=blink1 && mlink!=blink2){
location.href=mlink; 
}
if(mlink==blink1 || mlink==blink2){
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! をあなたの好きな文字にかえてください。
さらに新しいウインドウへリンクするアドレスだけ別の設定をします。上から6行目や7行目にある blink1="java_hizuke.html"; などの部分には、メニューの中でも新しいウインドウへリンクするアドレスが書いてあります。java_hizuke.html などを、あなたのリンク先のアドレスにかえてください。
(ここには新しいウインドウへリンクするアドレスを書きます。この例では「今日の日付を表示させよう」= java_hizuke.html と「ボタンで背景の色をかえてみよう」= java_back1.html の2ヶ所が新しいウインドウへリンクしています)
もしメニューの中で、新しいウインドウへのリンクがヶ所なら、blink1="リンク先のアドレス"; の行だけにします。プログラムAのソースのようにヶ所なら、次の行に blink2="リンク先のアドレス"; を追加し、ヶ所なら同じように blink3="リンク先のアドレス"; というように行を追加してください。
次は上から8行目の if(mlink!="-" && mlink!=blink1 && mlink!=blink2){ のところです。先程の新しいウインドウへリンクするアドレスのところが、blink1="リンク先のアドレス"; だけ(1ヶ所)の場合なら、この行は if(mlink!="-" && mlink!=blink1){ にします。
プログラムAのソースのように、blink1="リンク先のアドレス"; と blink2="リンク先のアドレス"; がある(2ヶ所)場合なら、この行は if(mlink!="-" && mlink!=blink1 && mlink!=blink2){ になります。
blink3="リンク先のアドレス"; もある(3ヶ所)場合は、
if(mlink!="-" && mlink!=blink1 && mlink!=blink2 && mlink!=blink3){ というようにしてください。
上から11行目の if(mlink==blink1 || mlink==blink2){ のところも同じようにします。blink1="リンク先のアドレス"; だけ(1ヶ所)の場合なら、この行は if(mlink==blink1){ にします。
プログラムAのソースのように、blink1="リンク先のアドレス"; と blink2="リンク先のアドレス"; がある(2ヶ所)場合なら、この行は if(mlink==blink1 || mlink==blink2){ になります。
blink3="リンク先のアドレス"; もある(3ヶ所)場合は、
if(mlink==blink1 || mlink==blink2 || mlink==blink3){ というようにしてください。
フレームを使っている場合には、ソースの変更が必要です。上から9行目の location.href=mlink; の部分を、parent.フレーム名.location.href=mlink; にします。
たとえば下のソースのようなフレームページがあったとします。左側のフレームに、フレーム名が contents でファイル名が frame1.htm のページがあり、右側のフレームに、フレーム名が main でファイル名が frame2.htm のページがあります。
<frameset framespacing="0" border="0" frameborder="0" cols="160,*">
<frame name="contents" target="main" src="frame1.htm" scrolling="auto">
<frame name="
main" src="frame2.htm" scrolling="auto">
左側のフレームのページにドロップダウンメニューを表示させて、右側のフレームのページにリンク先のページを表示させたいとすると、ソースは・・・ parent.main.location.href=mlink; となります。
ボタンのないドロップダウンメニューのソースは下のようになります。こちらはメニューから選んだだけでジャンプします。
ボタンなしタイプのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function Mylink(sel){
mlink=sel.options[sel.selectedIndex].value;
blink1="java_hizuke.html";
blink2="java_back1.html";
if(mlink!="-" && mlink!=blink1 && mlink!=blink2){
location.href=mlink; 
}
if(mlink==blink1 || mlink==blink2){
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へ