イメージについて

■画像を表示する

画像を表示する時に使います。

SOURSE

<HTML>
<HEAD>
<TITLE>イメージについて</TITLE>
</HEAD>
<BODY>
<IMG SRC="../images/monsyo.gif>

 </BODY>
</HTML>

■画像を表示できないブラウザへの配慮

 画像を表示するかわりにテキストを表示します。
画像の上にポインタを乗せると表示されます。

SOURSE

<HTML>
<HEAD>
<TITLE>イメージについて</TITLE>
</HEAD>
<BODY>
<IMG SRC="../images/monsyo.gif ALT="Ｚ帝國紋章">
Ｚ帝國紋章

このように表示されます
 </BODY>
</HTML>

■イメージの大きさを変えたい

 画像のサイズを指定します。ピクセルか％で指定します。
％で指定するとウィンドウの大きさによってサイズが変わります
このタグで指定するより元画像のサイズを変えた方がいいと思います。
使うとすれば、画像表示をしない人でもレイアウトを崩さないために使うといいと思う。

SOURSE

<HTML>
<HEAD>
<TITLE>イメージについて</TITLE>
</HEAD>
<BODY>
そのままの大きさ。
<IMG SRC="../images/monsyo.gif WIDTH="100" HEIGHT="100">

<IMG SRC="../images/monsyo.gif" WIDTH="35%" HEIGHT="20%">

<IMG SRC="../images/monsyo.gif" WIDTH="5%" HEIGHT="5%">

<IMG SRC="#" WIDTH="100" HEIGHT="100" alt="このようにレイアウトを崩しません">

このようにレイアウトを崩しません指定なし

</BODY>
</HTML>

■イメージに境界線を引く

 指定すると画像の周りに線（外枠）が引かれます。
リンクボタンを設定すると勝手に引かれてしますうのでこれを0にすれば表示されなくなります。

SOURSE

<HTML>
<HEAD>
<TITLE>イメージについて</TITLE>
</HEAD>
<BODY>
<IMG SRC="../images/monsyo.gif" BORDER="0">

<IMG SRC="../images/monsyo.gif" BORDER="5">

<IMG SRC="../images/monsyo.gif" BORDER="200">

</BODY>
</HTML>

■イメージとテキストの並び方を指定する

SOURSE

<HTML>
<HEAD>
<TITLE>イメージについて</TITLE>
</HEAD>
<BODY>
・top,middle(center),bottom
<IMG SRC="../images/monsyo.gif" ALIGN="top">topを指定
topを指定

<IMG SRC="../images/monsyo.gif" ALIGN="middle">middle(center)を指定
middle(center)を指定

<IMG SRC="../images/monsyo.gif" ALIGN="bottom">bottomを指定
bottomを指定

・toptext,absmiddle,baseline,absbottom(IEとNNとでは実行結果が違います。)
<IMG SRC="../images/monsyo.gif" ALIGN="middle">基準
<IMG SRC="../images/yajirusi.gif" ALIGN="texttop">texttop
<IMG SRC="../images/yajirusi.gif" ALIGN="absmiddle">absmiddle
<IMG SRC="../images/yajirusi.gif" ALIGN="absbottom">absbottom
<IMG SRC="../images/yajirusi.gif" ALIGN="baseline">baseline
基準 texttop absmiddle absbottom baseline

<IMG SRC="../images/monsyo.gif" ALIGN="top">基準
<IMG SRC="../images/yajirusi.gif" ALIGN="middle">middle
<IMG SRC="../images.yajirusi.gif" ALIGN="absmiddle">absmiddle
<IMG SRC="../images/yajirusi.gif" ALIGN="absmiddle">absmiddle
<IMG SRC="../images/yajirusi.gif" ALIGN="absbottom">absbottom
<IMG SRC="../images/yajirusi.gif" ALIGN="baseline">baseline
基準 texttop absmiddle absbottom baseline

<IMG SRC="../images/monsyo.gif" ALIGN="middle">基準
<IMG SRC="../images/yajirusi.gif" ALIGN="top">top
<IMG SRC="../images.yajirusi.gif" ALIGN="texttop">
<IMG SRC="../images/yajirusi.gif" ALIGN="absmiddle">absmiddle
<IMG SRC="../images/yajirusi.gif" ALIGN="absbottom">absbottom
<IMG SRC="../images/yajirusi.gif" ALIGN="baseline">baseline
基準 texttop absmiddle absbottom baseline

・left,right
<IMG SRC="../images/monsyo.gif" ALIGN="left">
適当に作った紋章だ。
誰か作ってくれ
<BR>
<BR>
<BR>
<IMG SRC"../images/monsyo.gif" ALIGN="right">
適当に作った紋章だ。
誰か作ってくれ
はみ出ると下に書かれる
 </BODY>
</HTML>

■イメージとテキストのスペースを指定する

 画像の左右、上下にスペースを入れます。
あんまり使わないと思うけど、レイアウトを微調整する時にでも使えるか・・。

SOURSE

<HTML>
<HEAD>
<TITLE>イメージについて</TITLE>
</HEAD>
<BODY>
<IMG SRC="../images/monsyo.gif" ALIGN="left" VSPACE="40">
適当に作った紋章だ。
誰か作ってくれ
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<IMG SRC"../images/monsyo.gif" ALIGN="left" HSPACE="40">
適当に作った紋章だ。
誰か作ってくれ
はみ出ると下に書かれる
 </BODY>
</HTML>

■画像、側面テキストのカット

 画像の側面にテキスト入れるとその画像の高さによってずーと続いてしまうので、
<BR CLEAR>を使えば、何回も<BR>を打たなくてもいいよ。
という風に使うのかな？

SOURSE

<HTML>
<HEAD>
<TITLE>イメージについて</TITLE>
</HEAD>
<BODY>
<IMG SRC="../images/monsyo.gif" ALIGN="left">
適当に作った紋章だ。
誰か作ってくれ
<BR CLEAR="all">
<IMG SRC"../images/monsyo.gif" ALIGN="left">
適当に作った紋章だ。
誰か作ってくれ
はみ出ると下に書かれる
 </BODY>
</HTML>

■画像にいくつものリンクを設定する

 クライアントサイドイメージマップ
１つの画像に複数のリンクを作りたいときに使います。
画像を非表示されると手も足もでません。でも使い様によってはレイアウトを全部画像にまかせられます。

SOURSE

<HTML>
<HEAD>
<TITLE>イメージについて</TITLE>
</HEAD>
<BODY>
<img src="../images/cbctitle.gif" width="600" height="50"usemap="#cbctitle">
<map name="cbctitle">
<area shape="rect" coords="55,21,145,49" href="../index.html">
<area shape="polygon" coords="145,30,145,49,236,49,236,30,231,25,226,20,155,20,148,28" href="../index.html">
<area shape="circle" coords="26,26,20" href="index.html">
</map>

</BODY>
</HTML>