中級編３

　フレームというページ分割技の勉強
　　　リンク技との合わせ技で画像を呼び出してみよう。

まず先に、サンプルでイメージを把握しましょうか。 ●ココをクリック● して下さい。
どうですか、ミニ画像をクリックすると別画面で大きな画像が反応しましたね。ミニ画像をクリックして画像が切り替わるのはリンク技。既に体験済みです。
画面を分割して使う技は フレーム技 です。これは初体験ですね。
フレーム構造には複数のＨＴＭＬ文が必要になります。上記リンクのサンプルフレーム構造の場合は３つ。 上下２分割を宣言するＨＴＭＬ文（ frame.html ）とその上側に表示させるＨＴＭＬ文（ frame-1.html ）。 下側表示用のＨＴＭＬ文（ frame-2.html ）の３つです。
まず、フレーム宣言のＨＴＭＬ（ frame.html ）は下記の通り。 

<html>
<frameset ROWS="150,*">
<frame SRC="frame-1.html" NAME="one">
<frame SRC="frame-2.html" NAME="two">
</FRAMESET>
</html>
サンプルのように上下で分割する場合は ROWS= 。左右で分割する場合はと COLS= と書きます。 大文字小文字はこれまでと同じくどちらでも問題ありません。
書式に NAME="one" と NAME="two" がありますね。これはフレームに名前を付けた訳です。 上が one で下が two です。 もし仮に左右分割フレーム構造（ COLS= ）の場合は、左がoneで右がtwoとなります。
次に上側のＨＴＭＬ文（ frame-1.html ）です。 

<HTML>
<BODY bgcolor=ffffcc>
見たいポスターのアイコンをクリックしてみてください♪<br><br>
<a href="0.jpg" target="two"><img border=0 src="0.jpg" width=55></a>
<a href="1.jpg" target="two"><img border=0 src="1.jpg" width=55></a>
<a href="2.jpg" target="two"><img border=0 src="2.jpg" width=55></a>
<a href="3.jpg" target="two"><img border=0 src="3.jpg" width=55></a>
<a href="4.jpg" target="two"><img border=0 src="4.jpg" width=55></a>
<a href="5.jpg" target="two"><img border=0 src="5.jpg" width=55></a>
</BODY>
</HTML>
リンクの書式はマスター済みですよね。そこにtarget=という付属品がありますね。これがポイント。 フレーム宣言ＨＴＭＬ文（ frame.html ）で上側を one 下側を two と名付けましたよね。 それがここで関係しています。要するにリンク先は下側（ two ）に表示するという意味です。
４行目の<a href="0.jpg" target="two"><img border=0 src="0.jpg" width=55></a>が語っているのは、 <img border=0 src="0.jpg" width=55>をクリックしたら、 0.jpg画像をフレーム two に表示させるぞ！なのです。
では、<img border=0 src="0.jpg" width=55>は何かと言えば、0.jpg画像を横幅55サイズにした画像を指します。 上側のサイズ55のミニ画像をクリックしたら、下側にフルサイズの画像を表示させるぞ！なのです。
3つ目のＨＴＭＬ文（ frame-2.html ）は簡単ですね。 

<HTML>
<BODY bgcolor=lightgray>
こちらが大きく表示する場所です。
</BODY>
</HTML>
下側フレームに最初だけコメント表示させるページです。

以上の３つのＨＴＭＬ文と画像があれば、サンプルフレームは出来上がります。画像は圧縮版で一気に取り込んで下さい。 ●黒沢ポスター画像データ● ←これをクリックするとZIPファイルで取り込めます。 この ダウンロードリンク は次の項で解説しますので、ご安心を。
ここまでで揃った３つのＨＴＭＬ文と５つのkurosawa画像を貴方のホームページ専用フォルダ（ myHP ）に保存しましょう。 その上で、 frame.html をダブルクリックするとサンプル通りのフレーム構造が再現される筈です。お試し下さい。
再現できたら、この項は修了です。
質問メール　 SCHOOL TOP