奥義　神速（しんそく）・浮月（ふげつ）

〜ショートカットメニューの作り方〜

ショートカットメニューとは？

自分のホームページをつくり、更新を重ねると
場合によってはリンクしているページが多くなることもあるだろう。
そうなるとハイパーリンクがページの容量の大半を占める、ということも考えられる。

そこで、「タグ大全」で出てきた「フォーム」を使って
リンク先のページを選択できるようにする。


奥義　神速（しんそく）〜ショートカットメニューの作成〜







１、<Head>〜</Head>間に次のように書き込む


<SCRIPT language="JavaScript">
<!-- 
function Sinsoku(){
selurl=document.moto.ikisaki.options[document.moto.ikisaki.selectedIndex].value;
if (selurl != "" )location.href=selurl;
}
 -->
</SCRIPT>


２、次のようなフォームを本文中に作成する


<FORM NAME="moto">
<SELECT name="ikisaki" onChange="Sinsoku()">
<SELECT name="ikisaki" onChange="Sinsoku()">
<OPTION>--奥義を選択--
<OPTION value="3bk.html">奥義・三種の返し技
<OPTION value="mio.html">奥義・澪標（みおつくし）
<OPTION value="aya.html">奥義・三彩（さんさい）
</SELECT>
</FORM>


メニューから選んでクリックすると

指定したファイルを開きます。

（ブラウザの「戻る」ボタンで戻ってきてください）






<OPTION value="ファイル名またはリンク先">表示名

「<OPTION>表示名」だけだとリンクはできない。

フォーム名（moto）とリスト名（ikisaki）は任意の名前に変更可能。






なお、フレームページの場合は
if (selurl != "" )location.href=selurlの部分を
if (selurl != "" )parent.表示するフレーム名.location.href=selurlと変更することで
使用可能になる。


奥義　浮月（ふげつ）〜リンク先を新しいウィンドウで開く〜







１、<Head>〜</Head>間に次のように書き込む


<SCRIPT language="JavaScript">
<!-- 
function Fugetu(){
if (document.ougi.elements[0].selectedIndex == 0) window.open("3bk.html")
else if (document.ougi.elements[0].selectedIndex == 1) window.open("mio.html")
else if (document.ougi.elements[0].selectedIndex == 2) window.open("aya.html")
}
 -->
</SCRIPT>


２、次のようなフォームを本文中に作成する


<FORM NAME="ougi">
<SELECT>
<OPTION>奥義・三種の返し技
<OPTION>奥義・澪標（みおつくし）
<OPTION>奥義・三彩（さんさい）
</SELECT><input type="button" value="見る" onClick="Fugetu()">
</FORM>


メニューから選んで「見る」をクリックすると

新しいウィンドウに指定したファイルを開きます。






<OPTION>表示名

window.open("ファイル名")

window.openの前には半角スペースを入れる。

フォーム名（ougi）は任意の名前に変更可能。






「selectedIndex == 0」の数字の部分が「リストの一番上から何行目」という意味になっている。
ちなみにカウントは「0」から始まるので注意。
この場合だと１行目は「奥義・三種の返し技」となっている。

２行目以降は「if」の前に「else」を付け忘れないように注意。

リストの中から日付を選んだら作成した「見る」ボタン（<input type="button" value="見る" onClick="Message()">）
をクリックすることによって新しいウィンドウの中に指定したファイルが表示される。


奥義　浮月（ふげつ）・改〜リンク先を新しいウィンドウで開く〜







１、<Head>〜</Head>間に次のように書き込む


<SCRIPT language="JavaScript">
<!-- 
function Fugetu2(){
switch(document.form3.list3.selectedIndex){
case 0: window.open("3bk.html");break;
case 1: window.open("mio.html");break;
case 2: window.open("aya.html");break;
}
}
 -->
</SCRIPT>


２、次のようなフォームを本文中に作成する


<FORM NAME="form3">
<SELECT NAME="list3">
<OPTION>奥義・三種の返し技
<OPTION>奥義・澪標（みおつくし）
<OPTION>奥義・三彩（さんさい）
</SELECT><input type="button" value="見る" onClick="Fugetu2()">
</FORM>


メニューから選んで「見る」をクリックすると

新しいウィンドウに指定したファイルを開きます。






<OPTION>表示名

window.open("ファイル名")

window.openの前には半角スペースを入れる。

フォーム名（form3）とリスト名（list3）は任意の名前に変更可能。





通常版「浮月」よりも内容が多少すっきりとしたのがおわかりだろうか？

「case ○:」の部分は「リストの上から○番目が選択された場合」を示している。
「else if (document.rireki.elements[0].selectedIndex == ○) 」が
「case ○:」に変わっただけだが、注意事項が二つ。

戻る