★画像を表示するには

<IMG SRC="イメージファイル名">

《設定例》

<IMG SRC="sumple.gif"

《結果》




★画像の大きさを変えるには

<IMG SRC="画像ファイル" WIDTH="サイズ" HEIGHT="サイズ">

イメージのサイズはピクセルかパーセントで指定します。ピクセルを指定する場合は絶対的な大きさであり、％で指定するときは、ウィンドウの大きさに対する比率になります。画像サイズの変更は元の画像イメージを壊してしまうおそれがあるので注意します。

《設定例》

<IMG SRC="sumple.gif" WIDTH="50" HEIGHT="50"> <IMG SRC="sumple.gif" WIDTH="20%" HEIGHT="20%"> <IMG SRC="sumple.gif" WIDTH="30" HEIGHT="30%">

《結果》


★画像の周囲に枠線を引くには

<IMG SRC="画像ファイル" BORDER="ピクセル">

イメージをリンクボタンとして設定する場合は境界線が引かれますが、通常のイメージには枠線は引かれません。 枠線を引くにはBORDERオプションを使います。

《設定例》

<IMG SRC="sumple.gif" BORDER="0"> <IMG SRC="sumple.gif" BORDER="1"> <IMG SRC="sumple.gif" BORDER="5">

《結果》




★イメージとテキストの配置を指定するには

<IMG SRC="画像ファイル" ALIGN="オプション">

ALIGN オプションを使うと、画像とテキストの並び方を指定できます。 ALIGN を指定しない場合、bottom と同じ配置になります。1行に入りきれないテキストは画像の下側に表示されます。
※Internet Explorer では、middle はサポートしていません。

top	イメージの上部にテキストを配置する
middle(center)	イメージの中央にテキストを配置する
bottom	イメージの下部にテキストを配置する
texttop	最も背の高いテキストの上部と画像の上部を並べる
absmiddle	テキストや画像の中央に画像を合わせる。
absbottom	行中の一番下とイメージの下端をあわせます。

《設定例》

<IMG SRC="sumple.gif" ALIGN="middle">middle <IMG SRC="sumple.gif" ALIGN="top">top <IMG SRC="sumple.gif" ALIGN="absmiddle">absmiddle <IMG SRC="sumple2.gif" ALIGN=top">top <IMG SRC="sumple.gif" ALIGN="bottom"<bottom <IMG SRC="sumple.gif" ALIGN="absbottom">absbottom <IMG SRC="sumple.gif" ALIGN="texttop">texttop

《結果》

middle

top

absmiddle

top

bottom

absbottom

texttop

<IMG SRC="画像ファイル" ALIGN="オプション">

《設定例》

<IMG SRC="sumple2.gif" ALIGN="left"> イメージの側面に複数の行を配置させるには Left または Right オプションを指定します。<BR> この例は、オプションに left を指定した場合です。<BR> イメージが左に置かれその側面にテキストが表示されます。<BR> イメージの横に収まらないテキストは下の行に移動します。<BR> オプションに right を指定すると、イメージイメージが右側に置かれ<BR> その側面にテキストが表示されます。<BR> イメージの横に収まらないテキストは下の行に移動します。

《結果》

イメージの側面に複数の行を配置させるには Left または Right オプションを指定します。
この例は、オプションに left を指定した場合です。
イメージが左に置かれその側面にテキストが表示されます。
イメージの横に収まらないテキストは下の行に移動します。
オプションに right を指定すると、イメージイメージが右側に置かれ
その側面にテキストが表示されます。
イメージの横に収まらないテキストは下の行に移動します。

<IMG SRC="画像ファイル"　VAPACE="上下の余白"　HSPACE="左右の余白">

《設定例》

<IMG SRC="sumple2.gif" ALIGN="left" HSPACE="50" VSPACE="10"> VSPACE や HSPACE は、イメージとテキスト間やイメージとイメージ間に空きを設けたいときに、ピクセル数を指定します。<BR> この例題では、横方向の左右の余白を50ピクセル、縦方向の余白を10ピクセルに設定してみました。

《結果》

HSPACE や VSPACE は、イメージとテキスト間やイメージとイメージ間に空きを設けたいときに、ピクセル数を指定します。
この例題では、横方向の左右の余白を50ピクセル、縦方向の余白を10ピクセルに設定してみました。

★回り込みを解除するには

<BR CLEAR="オプション">

《設定例》

<IMG SRC="sumple.gif" ALIGN="left"> テキストの回りこみを解除して、イメージファイルの下の行から続けたいときには<BR> BRタグにCLEARオプション(all、left、right)を指定します。<BR> left を指定するとイメージは左寄され、次の右余白にテキストの続きがおかれます。<BR CLEAR="left"> この例ではオプションに left を指定し、この行の最初で回り込みを解除しています。<BR><BR> <IMG SRC="sumple.gif" ALIGN="right"> この例ではCLEARオプションに right を指定しています。<BR> 画像が右寄せになります。<BR CLEAR="all"> ALL を指定した回り込みの解除は、左右余白のあるところにテキストが続きます。<BR> オプションを付けない場合は ALL と同じ結果になり、左右余白のあるところにテキストが続きます

《結果》

テキストの回りこみを解除して、イメージファイルの下の行から続けたいときには
BRタグにCLEARオプション(all、left、right)を指定します。
left を指定するとイメージは左寄され、次の右余白にテキストの続きがおかれます。
この例ではオプションに left を指定し、この行の最初で回り込みを解除しています。


この例ではCLEARオプションに right を指定しています。
画像が右寄せになります。
ALL を指定した回り込みの解除は、左右余白のあるところにテキストが続きます。
オプションを付けない場合は ALL と同じ結果になり、左右余白のあるところにテキストが続きます。


★イメージにリンクを設定するには


<IMG SRC="画像ファイル"　USEMAP="#マップ名">
<MAP NAME="マップ名">
<AREA オプション>
</MAP>

AREAタグは「領域の形(shape=)　座標(coords=)　リンク先(href=)」で構成されます。

《領域の形》

rect	長方形
circle	円
poly	多角形
default	どの領域にも入らない場所

《設定例》

<img src="map.gif" usemap="#map" border="0"> <map name="map"> <area shape="rect" coords="8,8,43,18" href="sample1.html"> <area shape="rect" coords="46,35,81,45" href="sample2.html"> <area shape="rect" coords="86,65,121,75" href="sample3.html"> </map>

《結果》