メニュー付き疑似インラインフレーム
先ずは左の赤枠の中のリンクをクリックしてください。
どうです？ 下に書いてある文章が変わったでしょう！ だから何なのって？(＾＾；
実はですね… これを応用すれば、たった１ページしか無くてもメニューで
切り替わるようなページが作れるのです。
overflowプロパティを使ってインラインフレーム風の表示（擬似フレーム）にすれば
更にそれらしくなります。
最初に上の例を解説します。
このメニューを切替える役割を担うJavaScriptです。
(DOM Level 1 準拠)
下の応用例もこれを使用します。
通常は<head>〜</head>の中に置きます。
document.getElementsByTagNameでdiv要素を取得し、menu_classで指定されたクラス名
に該当するdivを一旦全て非表示にしてから、menu_idで指定されたＩＤを表示する
ようにしています。
function dmenu(menu_class,menu_id) {
var tn=document.getElementsByTagName("div");
for (var i=0; i < tn.length; i++)
if (tn[i].className == menu_class)
tn[i].style.display="none";
document.getElementById(menu_id).style.display="block";
}
// --></script>
リンクと表示内容の部分です。
div要素に共通のclassと、それぞれ違ったidを設定します。
そして最初に表示しておく部分のみstyle="display:block;"にします。
メニューのリンクはjavascript:dmenu('classの値','idの値');になります。
切り替わる部分をdiv以外のタグに適用する場合はJavaScriptも修正が必要です。
<a href="javascript:dmenu('akasata','ka');">か行</a>
<a href="javascript:dmenu('akasata','sa');">さ行</a>
<a href="javascript:dmenu('akasata','ta');">た行</a>
<br>
<div class="akasata" id="a" style="display:block;">あいうえお</div>
<div class="akasata" id="ka" style="display:none;">かきくけこ</div>
<div class="akasata" id="sa" style="display:none;">さしすせそ</div>
<div class="akasata" id="ta" style="display:none;">たちつてと</div>
応用例その１
普通のインラインフレーム風。
JavaScriptの部分は共通です。コメント部分参考にしてください。
は半角１文字分のスペース(空白文字)になります。
<a href="javascript:dmenu('sample1','s1m1');">日記</a>
<a href="javascript:dmenu('sample1','s1m2');">小説</a>
<a href="javascript:dmenu('sample1','s1m3');">LINK</a>
</div>
<div style="width:200px; /* フレーム幅 */ border:inset 2px black;">
<div class="sample1" id="s1m1" style="height:100px; /* フレーム高さ */ overflow:auto; display:block;">
<div style="height:105%;">
<!-- 内容(1)ここから -->
○月○日 日記始めました。
<!-- 内容(1)ここまで -->
</div>
</div>
<div class="sample1" id="s1m2" style="height:100px; /* フレーム高さ */ overflow:auto; display:none;">
<div style="height:105%;">
<!-- 内容(2)ここから -->
執筆中
<!-- 内容(2)ここまで -->
</div>
</div>
<div class="sample1" id="s1m3" style="height:100px; /* フレーム高さ */ overflow:auto; display:none;">
<div style="height:105%;">
<!-- 内容(3)ここから -->
相互LINK募集中
<!-- 内容(3)ここまで -->
</div>
</div>
</div>
応用例その２
イメージマップと合わせてみました。
勿論JavaScript部分は共通です。上の例や
インラインフレームとイメージマップ
と比較すると仕組みも大体分かると思います。
フレームになる部分のスタイルシートは
ヘッダスタイル情報としてまとめて設定してあります。
.sample2 {
/* この例ではここでまとめて指定 */
height: 155px; /* フレーム高さ */
overflow: auto;
display: none;
/* スクロールバーの色はdivに対して設定 IE以外は効果無し？ */
scrollbar-face-color: #fefefe;
scrollbar-track-color: #fefefe;
scrollbar-shadow-color: #5f5f5f;
scrollbar-darkshadow-color: #3f3f3f;
scrollbar-highlight-color: #bfbfbf;
scrollbar-3dlight-color: #efefef;
scrollbar-arrow-color: #3f3f3f;
filter: Chroma(color=#fefefe);
}
--></style>
<div style="text-align:center;">
<div style="display:block; position:relative; width:500px; height:400px; margin-left:auto; margin-right:auto;">
<img src="woodenframe.jpg" alt="メニュー画像" title="" usemap="#map0" style="border:none;">
<div style="position:absolute; left:100px; top:100px; text-align:left; width:295px; /* フレーム幅 */">
<div class="sample2" id="s2menu1" style="display:block;">
<div style="height:105%;">
<!-- 内容(1)ここから -->
恐い話
<!-- 内容(1)ここまで -->
</div>
</div>
<div class="sample2" id="s2menu2">
<div style="height:105%;">
<!-- 内容(2)ここから -->
楽しい話
<!-- 内容(2)ここまで -->
</div>
</div>
<div class="sample2" id="s2menu3">
<div style="height:105%;">
<!-- 内容(3)ここから -->
哀しい話
<!-- 内容(3)ここまで -->
</div>
</div>
</div>
</div>
</div>
<map name="map0">
<area href="javascript:dmenu('sample2','s2menu1');" alt="MENU-1(恐い話)" title="MENU-1(恐い話)" shape="rect" coords="70,310,180,332">
<area href="javascript:dmenu('sample2','s2menu2');" alt="MENU-2(楽しい話)" title="MENU-2(楽しい話)" shape="rect" coords="195,310,305,332">
<area href="javascript:dmenu('sample2','s2menu3');" alt="MENU-3(哀しい話)" title="MENU-3(哀しい話)" shape="rect" coords="315,310,425,332">
</map>
※ style要素（スタイルシート）はヘッダ内(<head>〜</head>の中)に
置いてください。
※ メニューは同じ要領で追加出来ます。idが重複しないように注意してください。
※ Operaは行内スタイル規則で書かないとdiv要素のスクロールバーに色が
反映されないようです。