64歳パソコン教師の日記 NO.794 (2002.5.01)


 この二日間は東京オフ会の写真などのアップに追われていましたので、一昨日、昨日とマガジンを休刊させていただきました。決して二日酔い、三日酔いで寝ていたのではありませんのでご了承ください。

 今日のマガジンはデジカメで撮った写真をアルバム形式に見やすく表示する方法です。ホームページでもこのまま使うことができます。サンプルはホームページの「東京オフ会写真(5)」をご覧ください。

 昨日は、この写真のページを見やすくするにはどうしたら良いかと、無い知恵を絞っていました。1ページに表示する枚数が少なければそのまま表示すれば良いのですが、枚数が多い場合は表示に時間がかかります。

 そのためにサムネイル(縮小画像)を一覧表示させ、見たい画像をクリックすると大きな画像が表示されるようにします。ところが、サムネイルで表示する画像が元のままですと、小さく表示されるだけで表示に要する時間は変わりません。元の画像を縮小した画像を用意しておきます。

 元の画像を「ペイント」で表示、→「変形」→「伸縮と傾き」とクリック、→「伸縮」欄の「水平方向」と「垂直方向」のパーセンテージを同じ数値にします。30%程度が良いでしょう。

 画像が縮小されたら、→「ファイル」→「名前を付けて保存」とクリック、「ファイル名」欄の名前に「s」などの文字を追加して、→「保存」ボタンをクリックします。これで大小一組の画像が揃います。

 サムネイル表示するページは「メモ帖」に次下記のように記述をして作成します。横に3枚のサムネイル画像を表示する例です。


<HTML>
<HEAD>
<TITLE>写真集 Vol.1</TITLE>
</HEAD>
<BODY>
<A onClick="window.open ('01.html','sub','width=412,height=360');">
<IMG SRC="01s.jpg" BORDER="0"></A>
<A onClick="window.open ('02.html','sub','width=640,height=400');">
<IMG SRC="02s.jpg" BORDER="0"></A>
<A onClick="window.open ('03.html','sub','width=480,height=360');">
<IMG SRC="03s.jpg" BORDER="0"></A><BR>
<A onClick="window.open ('04.html','sub','width=480,height=360');">
<IMG SRC="04s.jpg" BORDER="0"></A>
<A onClick="window.open ('05.html','sub','width=480,height=360');">
<IMG SRC="05s.jpg" BORDER="0"></A>
<A onClick="window.open ('06.html','sub','width=480,height=360');">
<IMG SRC="06s.jpg" BORDER="0"></A>
</BODY>
</HTML>


  1. 写真集 Vol.1 はタイトルバーに表示される文字列です。

  2. 01.html は元の画像のファイル名です。

  3. width=412,height=360 は元の画像サイズです。このサイズのサブウインドウが開きます。

  4. 01s.jpg はサムネイル画像のファイル名です。

  5. BORDER="0" はサムネイル画像にリンクの枠が付かないようにします。

  6. <BR>は改行タグです。横に4枚ずつ並べる場合は、4枚目の記述の最後に<BR>を移動します。
 次は元の画像を表示するページの作成です。写真の枚数だけ作成します。1枚目を「01.html」というファイル名で保存したら、 →「01」を「02」に書き直し、→「ファイル」→「名前を付けて保存」とクリック、→「ファイル名」を「02.html」として、→「保存」ボタンをクリックします。



<HTML>
<HEAD>
<TITLE>01</TITLE>
</HEAD>
<BODY BACKGROUND="01.JPG" onBlur="close();">
<DIV STYLE="position:absolute;bottom:10;font-family:MS ゴシック;font-size:11pt;color:white">
<MARQUEE>第2回東京オフ会会場「芝弥生会館」の外観です。</MARQUEE></DIV>
</BODY>
</HTML>


  1. BACKGROUND="01.JPG" は元の画像を背景画像として表示する記述です。これでウインドウの上と左に余白がなく画像が表示され、文字を画像の上に表示できます。

  2. onBlur="close();" サブウインドウが非アクティブになったら閉じる記述です。

  3. <DIV STYLE="position:absolute;bottom:10;font-family:MS ゴシック;font-size:11pt;color:white"> 表示する文字の指定です。

  4. position:absolute;bottom:10; 文字を表示する位置の指定です。 この例ではウインドウの下から10pxの位置に表示されます。

  5. <MARQUEE>と</MARQUEE> に囲まれた文字列がスクロールします。長い文字列でもスクロールさせることによって1行で済みます。
 サムネイル表示された画像をクリックするとサブウインドウに大きな画像が表示されます。サブウインドウ以外の個所をクリックするとサブウインドウが閉じます。次に表示したいサムネイル画像をクリックしてもOKです。