★ジャンル別雑文集＆ホームページ作成
＆JavaScriptゲーム★
★当サイトは"JavaScript"を有効にして
ご利用いただくと便利です★
ご利用いただくと便利です★
テーマ１２．ページ移動ナビ２を作る
ページを移動するためにはページ移動用のナビゲーションが必要です。
前ページで表を利用したページ移動ナビの作成方法を紹介しました。
しかしそのナビでは、１ページずつしか移動することができません。
ページが増えてくると、もっと自由に移動できた方が便利です。
今回はJavaScriptを利用したページ移動ナビの作成方法を紹介します。
実際の表示はサンプルページのオをご覧下さい。
＜htmlの記述例＞
＜htmlの説明＞
ヘッド部分にJavaScriptの記述を追加しておきます。
この例では、script.jsという外部jsファイルを読み込ませる記述です。
cssファイルの外部化と同じ考え方ですね。
変更があった場合でも、一つの外部jsファイルを修正するだけで済みます。
なお、事前にファイルを作成しアップしておく必要があります。
さらに、ボディ部分の設置したい箇所にJavaScriptの記述を追加します。
この例では、myDoc6という命令を実行させる記述です。
＜jsファイルの記述例＞
＜jsファイルの説明＞
選択したページを開くという単純な命令です。
外部ファイルなので、ページを追加削除した場合でも修正作業が楽ですね。
ただし、このJavaScriptには欠点があります。
ブラウザのJavaScriptの設定が無効だと、全く使えないのです。
しかしながら、現状では無効は稀なのでそれほど心配はいりません。
＜cssファイルの記述例＞
＜cssファイルの説明＞
ボタンにマウスオーバーした時に指のマークが表示されます。
リンク部分の場合と同じマークなので、分かりやすいかもしれませんね。
以上のような方法で、JavaScriptを利用したページ移動ナビを作成することができます。
ページを移動するためにはページ移動用のナビゲーションが必要です。
前ページで表を利用したページ移動ナビの作成方法を紹介しました。
しかしそのナビでは、１ページずつしか移動することができません。
ページが増えてくると、もっと自由に移動できた方が便利です。
今回はJavaScriptを利用したページ移動ナビの作成方法を紹介します。
実際の表示はサンプルページのオをご覧下さい。
＜htmlの記述例＞
<head>
<script src="script.js"></script>
</head>
<body>
<script>
myDoc6();
</script>
</body>
<script src="script.js"></script>
</head>
<body>
<script>
myDoc6();
</script>
</body>
＜htmlの説明＞
ヘッド部分にJavaScriptの記述を追加しておきます。
この例では、script.jsという外部jsファイルを読み込ませる記述です。
cssファイルの外部化と同じ考え方ですね。
変更があった場合でも、一つの外部jsファイルを修正するだけで済みます。
なお、事前にファイルを作成しアップしておく必要があります。
さらに、ボディ部分の設置したい箇所にJavaScriptの記述を追加します。
この例では、myDoc6という命令を実行させる記述です。
＜jsファイルの記述例＞
function myGo(){
mySelect = document.myForm.myMenu.selectedIndex;
location.href = document.myForm.myMenu.options[mySelect].value;
}
function myDoc6(){
document.write('<form name="myForm">');
document.write('<select name="myMenu">');
document.write('<option value="hp.html">ＨＰ作成トップページ</option>');
document.write('<option value="hp1.html">ＨＰ作成１</option>');
document.write('<option value="hp2.html">ＨＰ作成２</option>');
document.write('<option value="hp3.html">ＨＰ作成３</option>');
document.write('<option value="hp4.html">ＨＰ作成４</option>');
document.write('</select>');
document.write('<input type="button" value="決定" onclick="myGo()">');
document.write('</form>');
}
mySelect = document.myForm.myMenu.selectedIndex;
location.href = document.myForm.myMenu.options[mySelect].value;
}
function myDoc6(){
document.write('<form name="myForm">');
document.write('<select name="myMenu">');
document.write('<option value="hp.html">ＨＰ作成トップページ</option>');
document.write('<option value="hp1.html">ＨＰ作成１</option>');
document.write('<option value="hp2.html">ＨＰ作成２</option>');
document.write('<option value="hp3.html">ＨＰ作成３</option>');
document.write('<option value="hp4.html">ＨＰ作成４</option>');
document.write('</select>');
document.write('<input type="button" value="決定" onclick="myGo()">');
document.write('</form>');
}
＜jsファイルの説明＞
選択したページを開くという単純な命令です。
外部ファイルなので、ページを追加削除した場合でも修正作業が楽ですね。
ただし、このJavaScriptには欠点があります。
ブラウザのJavaScriptの設定が無効だと、全く使えないのです。
しかしながら、現状では無効は稀なのでそれほど心配はいりません。
＜cssファイルの記述例＞
input[type="button"] {
cursor: pointer;
}
cursor: pointer;
}
＜cssファイルの説明＞
ボタンにマウスオーバーした時に指のマークが表示されます。
リンク部分の場合と同じマークなので、分かりやすいかもしれませんね。
以上のような方法で、JavaScriptを利用したページ移動ナビを作成することができます。
| ＨＰ作成トップページ＜＜ | ＨＰ作成１１＜ | ＨＰ作成１２ | ＞ＨＰ作成１３ |
皆様のご質問やご意見をお待ちしています。
下記バナー画像からメールが送信できます。
下記バナー画像からメールが送信できます。
