| リンクセレクター ver.2.1 |
||||
◆サンプル |
||||
|
＜機能と特徴＞ ・セレクトボックスを切替えるとジャンプします。 |
||||
 |
|
|
|
|
 |
|
| 公開日 | 2002.1.18 | ||
| 最終更新日 | 2003.7.20 | ||
| バージョン | ver.2.1 | ||
| 動作確認 | IE6.0,NN4.7,NN7.0,Opera7.2 | ||
| cookie | 不使用 | ||
| CSS | 不使用 | ||
| 更新履歴 | 2003.2.21 | ver.2.0 | スクリプトの簡略化 セレクトボックスの複数設置に対応(変更点：ソース全般) |
| 2003.7.20 | ver.2.1 | フレームに対応(変更点：ソース全般) | |
 |
|
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
||||
|
１．カスタマイズフォームを使って設定をしてください。 ２．ソース１を<head>〜</head>の間に書き込んでください。 ３．ソース２を<body>〜</body>の間の 表示したい位置に書き込んでください。 ４．ブラウザでテストしてみてください。 正常にジャンプすれば設置は完了です。 |
||||||
|
|
|||||
 |
|
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
|
|
|
■特にありません。
|
||||||
|
|
|||||
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
||
|
■ジャンプ先のフレームを指定する。(半角英数字) //設定〜//ここまでを１行を ジャンプさせたいフレーム名に変更してください。
l_frame[1] = 'frame_id';
■セレクトボックスを複数設置する。まず//設定〜//ここまでを１行増やし、 該当個所の数字を増やしてください。
l_frame[2] = "";
次にソース２をセレクトボックスを設置したい場所に増やし、該当箇所の数字を増やしてください。
<select onChange="link_selecter(2,this);">
■選択肢の数を増やす。<option>タグを増やし、 value属性の属性値にジャンプ先のファイルのパスを設定してください。
<option value="newpage.html">新しいページ</option>
■一番上の選択肢でも切り替わるようにする。一番上の<option>にvalue属性をつけてください。 属性値はジャンプ先のファイルのパスを設定してください。
<select onChange="link_selecter(1,this);">
<option value="newpage.html">新しいページ</option>
・
・
・
</select>
|
||||||
|
|
|||||
 |
 |
|
|
■ソース１(以下のソースを<head>〜</head>の間に書き込んでください) | |
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
//ver.2.1
l_frame = new Array();
//設定
l_frame[1] = ''; //ジャンプさせるフレームの名前
//ここまで
function link_selecter(i,posi)
{if(!posi.options[posi.selectedIndex].value)
{return;}
else if(!l_frame[i])
{location.href=posi.options[posi.selectedIndex].value;}
else
{eval('parent.'+l_frame[i]+'.location.href=posi.options[posi.selectedIndex].value;');}}
// -->
</script>
|
■ソース２(以下のソースを<body>〜<body>の間に書き込んでください) | |
<!--1個目のセレクトボックス-->
<form>
<select onChange="link_selecter(1,this);">
<option>ここから選んでね</option>
<option value="index.html">トップページ</option>
</select>
</form>
 |
|