サムネイルの表示方法・・

独学で料理関係のＨＰを作りたいと考えています。
ある程度の形はできそうなのですが、画像をいくつか
入れたいと考えています。例えば、「オムレツ」の
小さな画像をクリックすると別ウインドウで表示される
方法（サムネイルとかなんとか・・）の方法が分りません。ＨＰビルダーを使わずに自分でというのは
難しいのでしょうか？ちなみに就職活動中にみた
http://www.u2b.co.jp/magazine/beginner/html/20.h …サイトのサムネイルの感じが理想なんです。
どうかよろしく御回答下さい。

No.1 ベストアンサー 回答者： arikui 回答日時： 2003/01/31 23:01

ホームページを作るのに、必ずしもＨＰビルダーは必要ありません。

ＨＴＭＬの知識があれば、メモ帳で作れます。
昔はみんなそうでしたし、今もそうしているプロは多いです。

ご質問の件ですが、たとえば、

<A HREF="拡大表示したい画像か、その画像を載せているＨＴＭＬ" TARGET="_blank"><IMG SRC="小さな画像、つまりサムネイル画像" ></A>

と、記述すれば、最小限のことはできます。

ただし、小さな画像はご自分で用意する必要があります。

また、 TARGET="_blank"は別のウィンドウを開くための記述で、同じウィンドウ内に表示したいときには必要ありません。

ちなみに、ご質問に書かれている参考ページは、Dreamweaber というソフトを使って作られていますね。

この回答へのお礼

ありがとうございます！

＞小さな画像はご自分で用意する必要があります

というのは、画像ソフトで加工するということですね？
フリーソフトではなさそうですね（泣）
考えてみます。ありがとうございます。

お礼日時：2003/01/31 23:27

No.6 回答者： Spur 回答日時： 2003/02/01 13:05

No.4の者です。

画像加工ソフトは、改めて買ったり探したりしなくても、OSがWindows98以降なら付属しています。
ペイントブラシできますよ。
もちろんフリーソフトでもたくさんあります。
色々ありますが、↓ここが探しやすいと思います。２～３試して、自分に合うものを探してください。

参考URL：http://www.forest.impress.co.jp/retouch.html

No.5 回答者： noname#4326 回答日時： 2003/01/31 23:46

画像加工はビルダーでも出来ますよ。

改めて買わなくても大丈夫です。

No.4 回答者： Spur 回答日時： 2003/01/31 23:11

通常サイズの画像と、加工ソフトで小さくした画像を用意するだけです。

小さな画像を「sss.jpg」、通常サイズを「aaa.jpg」とすれば、
<a href=aaa.jpg><img src=sss.jpg border=0></a>
とすれば、小さな画像をクリックすると大きな画像に変わります。
でも、別窓を開いて大きな画像を出したければ、
<a href=aaa.jpg target=_new><img src=sss.jpg border=0></a>
としなければなりません。
さらに、開いた別窓を、いっぱいの大きさではなく、画像と同じ大きさに制御したければ、JavaScriptを使って、次のようにします。
<a href="JavaScript:window.open(aaa.jpg,photo,"width=600,height=400,scrollbars=no,resizable=no,toolbar=no,location=no,directories=no,status=no")><img src=sss.jpg border=0></a>

※「photo」は開く別窓の名前です。お好きな名前をつけてください。
※「width=600,height=400」は開く別窓の寸法です。

この回答へのお礼

かなり丁寧なお答え感謝です！
加工ソフトというのはいくらぐらいで
手に入るのでしょうか？感謝です！

お礼日時：2003/01/31 23:30

No.3 回答者： kmor 回答日時： 2003/01/31 23:02

サムネイル用の小さな画像を用意し、TABLEタグで出来ます。

<TABLE>
<TD align="center">
<A href="xxx.jpg" target="_blank">
<IMG src="xxx.gif" alt="クリックで表示">
</A>
</TD>
</TABLE>

このような感じで出来ます。

この回答へのお礼

ありがとうございました！

お礼日時：2003/01/31 23:29

No.2 回答者： the845t 回答日時： 2003/01/31 23:02

特に難しくありませんよ。

元になるオムレツの画像を用意し、
次にその画像を画像ソフトを利用しリサイズ（小さく）します。

HTMLの記述は
<a href="omuretsu.jpg"><img src="omuretsu_s.jpg" width="**" height="**" border="0" ALT="オムレツ" title="オムレツ"></a>

のように記述すればOK.
<a>で、大きな（基の）画像omuretsu.jpgをリンクし、
<img>で小さな画像omuretsu_s.jpgを表示する。

この回答へのお礼

ありがとうございます！
そう難しくなさそうです。良いページが
出来るように頑張ります！

お礼日時：2003/01/31 23:28