HOME

初級者のための初級者による
HTMLタグ一覧 | FAQ FAQ | サイトマップ サイトマップ | お問い合わせ お問い合わせ
ホームページの作り方講座
ちょっと差のつくテクニックJavaScript で遊ぼうプルダウンメニューから選ぶとフレーム変化
ホームページ作りの準備
1. ホームページとは?
2. ホームページの構造
3. ホームページ作りの手順
4. スペースの用意
5. ソフトウェアの用意
6. 素材の用意

ホームページの作り方
1. サンプルを作ってみよう
2. HTMLを編集しよう
3. データを転送しよう

ちょっと差のつくテクニック
1. ちょっと便利なHTML
2. JavaScript で遊ぼう
3. 掲示板で盛りあがろう
4. iモードのホームページ

要チェックな参考資料集
1. 参考ページリンク集
2. ホームページタブー20
3. 参考になる書籍集
4. その他お役立ちリンク集


ちょっと差のつくテクニック

JavaScript で遊ぼう

プルダウンメニューから項目を選ぶとフレームの内容が変化する

プルダウンメニューから項目を選ぶと、フレームの内容が変化します。 フレームの設置方法に関しては、「」をご参照ください。

サンプル

サンプルデモページ

設置方法

以下を <head> 内に貼りつけてください。
「top.contents.」の「contents」の部分を、フレームのターゲット名称に適宜変更します。

<script language="javascript">
<!--
function Jump(sel) {
if (sel.options[sel.selectedIndex].value) {
top.contents.location.href = sel.options[sel.selectedIndex].value;
}
}
// -->
</script>

以下を 内ののプルダウンメニューを表示させたいところに貼り付けてください。
*.html」には、飛ばしたい先のホームページ URL を記述し、「項目名(1)」には、プルダウンメニューに表示させる文字を記述します。

<form method="post" action="" name="">
<select name="location" onChange="Jump(url)">
<option value="*.html">項目名(1)</option>
<option value="*.html">項目名(2)</option>
<option value="*.html">項目名(3)</option>
<option value="*.html">項目名(4)</option>
</select>
</form>

 

サンプルメーカー

下 (↓) のテキストボックス」に必要な事項をいれて「サンプルを作成する」ボタンを押してください。
プルダウンメニューの HTML が生成されます。「サンプル HTML」の内容をコピーしてお使いください。

「(1) HEAD 部分」と「(2) BODY 部分」の 2 つの部分からなっていますので、この 2 つを併せて御利用いただくようお願いいたします。

1 つ目の
メニュー項目
リンク先 (半角英数字で)
表示する文字列
2 つ目の
メニュー項目
リンク先 (半角英数字で)
表示する文字列
3 つ目の
メニュー項目
リンク先 (半角英数字で)
表示する文字列
フレーム名
 

サンプル
HTML
(HEAD 部分)
サンプル
HTML
(BODY 部分)

 

TOP ↑
・広告掲載・リンクのご要望はお問い合わせフォームよりお願いいたします。→お問い合わせフォーム
・ホームページ作りの基本編を、オフラインでも、印刷して手元でも読めるテキストブックにしました→テキストブックのダウンロード
©初級者のための初級者によるホームページの作り方講座 since 1997