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> 内に貼りつけてください。

<script language="javascript">
<!--
function Go() {
SelectedOption = document.Form.Location.selectedIndex;
location.href = document.Form.Location.options[SelectedOption].value;
}
// -->
</script>

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

<form method="post" action="" name="Form">
<select name="Location">
<option value="*.html">項目名(1)</option>
<option value="*.html">項目名(2)</option>
<option value="*.html">項目名(3)</option>
<option value="*.html">項目名(4)</option>
</select>
<input type="button" name="Submit" value="GO" onClick="go()">
</form>

 

サンプルメーカー

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

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

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

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

 

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