|
前回のフレームリンクのお話をふまえて
今回は ちょっと応用編です。
まずは 下のページを見てください。
>> フレームのリンクサンプル
さて これどうなっているか理解できますか？
● このページは 10個のHTMLファイルでできています。
● 左のメニューをクリックしたら 右上のウィンドウが切り替わって
新しいメニューが出てきます。
● 右上のメニューをクリックしたら 右下のウィンドウに結果が
表示されます。
フレームのリンクを設定するときは それぞれ フレーム枠に名前を
つけるんでしたね。
今回は 左側メニューのフレーム枠は
leftFrame
右上のフレーム枠は topFrame
右下のフレーム枠は mainFrame とします。
練習するときは 必ずしもこのとおりでないとダメというわけではありませんよ。
あなたの解りやすい名前を付けてください。
<frameset cols="120,*">
<frame src="menu.html" name="leftFrame">
<frameset rows="120,*" cols="*">
<frame src="ue.html" name="topFrame">
<frame src="shita.html" name="mainFrame">
</frameset>
</frameset> |
では 今度は左のメニュー側に リンクを設定しましょう。
メニューをクリックすると ue2.htmlが 右上のフレームに表示されます。
右上のフレーム名は topFrame ですので、
| <a href="ue2.html" target="topFrame">ひらがな</a> |
同様に もう一つのメニューのリンクも設定しましょう。
● <a href="ue2.html" target="topFrame">ひらがな</a><br>
● <a href="ue3.html" target="topFrame">カタカナ</a> |
さて 今度は 上のメニューをクリックしたら 下のウィンドウに結果が表示される
という設定をしましょう。
これも 考え方は同じです
下の ウィンドウ枠の名前は mainFlame ですので、
| <a href="shita2.html" target="mainFrame">赤</a> |
同様で もうひとつのリンクも設定してみましょう
<a href="shita2.html" target="mainFrame">赤</a>
<a href="shita2-2.html" target="mainFrame">青</a> |
左側のメニューの場合は <br> を入れて改行をいれたので縦に並んでいますが、
右上のメニューの場合は <br> を入れなかったので 横に並ぶ というわけですね。
これで リンクの設定は完了です。
ポイントは どのフレーム枠に なんのファイルを表示させるのかを指定する
それだけのことです。
ちょっとややこしいですが ひとつひとつ分解すれば
そんなに難しくありません。
>> フレームのリンクサンプル
|
