6-7

 超初心者を脱皮したい-7
   複数画像をミニ画像からリンク呼び出しすることは。


『答え』 簡単に出来ますとも。

既に画像の表示やリンクをマスターされている優秀なお弟子さん達ですから簡単です。
まずはミニ画像を用意してそれをリンクボタンにするだけという実に簡単な仕掛けなんですよ。(画像加工アプリは最近いろいろありますから、窓の杜などでお気に入りを使ってみましょう。とにかく、縮小画像を作っておくのですよ。)
では、サンプルを見ましょうか。 ココ をクリックして下さい。 上がミニ画像のリンクボタンで、下のフレームに表示させるようになってます。(この辺りのレイアウトデザインは御自由に工夫して下さいませ)
このサンプルはsam8-f.htmlsam8-1.htmlsam8-2.htmlの3つのHTML文から構成されています。 前の項目でも説明の通り、最初にフレームの宣言文が必要です。それがsam8-f.htmlです。中身は次の通りです。

<html>
<frameset ROWS="120,*">
<frame SRC="sam8-1.html" NAME="one">
<frame SRC="sam8-2.html" NAME="two">
</FRAMESET>
</html>
上のフレームがミニ画像リストで下のフレームが大きい画像のリンク表示ですね。 中身を見たい方は次のリンクからソースをご覧下さい。
sam8-1.html / sam8-2.html
sam8-1.htmlはGeocitiesに置いているミニ画像に直リンクして使っていますが、現在のGeocitiesサーバーは 画像直リンク出来ないのでご注意下さい。
ご理解戴けましたか。 以上が理解できたら、この項は修了です。

尚、上記のサンプルは簡略化する意味で画像に直接リンクさせたタイプです。従って、背景色指定や 画像レイアウト調整が出来ないタイプです。そこで、HTML文にリンクさせたタイプも用意しておきます。 これなら、背景色指定やセンタリングなどが出来る訳です。そのサンプルは ココです。

●注意事項●
よく見かけるのですが、ミニ画像を別に作らないで画像表示テクニックで小さく見せる方法を使っておられるサイトがあります。

<img src="abc.gif" width=50>

(末尾のwidth=○○の数字を変えると画像の表示サイズが変化します。)
これだと画像データは大きいもののままですから、ミニ画像の意味がないのですよ。リンク用は別個に小さいデータを作成されるのが訪問戴いた方への配慮ってもんです。はい。

     . . . . .   . . . . .