Guide to HTML 3.2
　- Wilbur -

IMG - Inline Images

インライン・イメージ

IMGタグはイメージを入れる際に使われます。これはHRタグやBRタグと同じように empty elementです。クローズ・タグはありません。IMGタグはテキスト・レベルのエレメントですからブロック・レベル・エレメントの中で使うようにして下さい。　IMGタグもAタグと同じようにアトリビュートを入れずに、それだけで使われることはありません。　<IMG SRC=URL>はIMGタグのミニマム・アトリビュート (Minimum Attributes) です。

アトリビュートの説明

　SRC="URL"

リソース（イメージ・ファイル）のロケーションをURLで記入します。
　　e.g. <IMG SRC="park.jpg">

　ALT="string"

何らかの理由でイメージがロードされなかった場合に、代わりに表示されるテキストを記入しておきます。
　　e.g. <IMG SRC="park.jpg" ALT="Central Park">

　WIDTH=nとHEIGHT=n

イメージのサイズをピクセルで記入します。このイメージ・サイズを入れると、実際のイメージ・データをロードする前にブラウザーにページのレイアウトを前もって知らせることになるのでブラウザーの表示も早くなります。
　　e.g. <IMG SRC="park.jpg" ALT="Central Park" WIDTH=150 HEIGHT=100>

　ALIGN=left/right/top/middle/bottom

に入るLEFT, RIGHT TOP, MIDDLE, BOTTOM の五つのヴァリューは、イメージとイメージに続くテキストとの位置関係をコントロールする際に使われます。LEFTと RIGHTは左右の位置関係を、 TOP, MIDDLE, BOTTOMは上下の位置関係をコントロールします。

ALIGN=LEFT
イメージを左寄せで表示し、それに続くテキストはイメージの右側に回り込んで表示されます。
　　e.g. <IMG SRC="rotateRB.gif" ALIGN=LEFT>

A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. .......

---

ALIGN=RIGHT
LEFTと逆にイメージを右寄せで表示しテキストは左側に回り込んで表示されます。
　　e.g. <IMG SRC="rotateRB.gif" ALIGN=RIGHT>

A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. .......

---

NOTE:
テキストのイメージへの回り込みを避けたい場合は、BRタグにCLEARというアトリビュートを入れて使うことで可能です。

　　e.g. <IMG SRC="rotateRB.gif" ALIGN=LEFT>
　　　　<BR CLEAR=LEFT>

A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. .......

BRタグのCLEARアトリビュートにはLEFT, RIGHT, ALLのいずれかのヴァリューを選ぶことになりますが、これはIMGタグにいれたALIGNアトリビュートのヴァリューと同じヴァリューを入れます。 あるいはCLEAR=ALLは左右に残った余白をクリアーしてくれます。

---

TOP, MIDDLE, BOTTOMはテキストをイメージのどの位置に表示するかを指示するアトリビュートですが、これはテキスト一行だけに対して行われます。テキストが一行以上になる場合は二行目からはイメージの下に表示されます。

ALIGN=TOP
A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. .......

ALIGN=MIDDLE
A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. .......

ALIGN=BOTTOM
A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. .......

NOTE:
ALIGNにはLEFT/RIGHT/TOP/MIDDLE/BOTTOMの五つのヴァリューから一つだけ選択することになりますが、ディフォルトはBOTTOMになっています。

　VSPACE =nとHSPACE =n

はイメージの回りに空スペースを作る際に使われ、ピクセル数を記入します。 VSPACE (Vertical spacing)はイメージの上下にスペースをとり、 HSPACE (Horizontal spacing)は左右にスペースをとります。

　e.g. <IMG SRC="rotateRB.gif" align=left vspace=20 hspace=20>

A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. ....... A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. A rotating blue ribbon. .......

　　BORDER=n

イメージをハイパーリンクに使った場合に、イメージの回りにボーダーラインが引かれます。通常はテキストの場合と同じようにブルーのラインです。"BORDER"はこのラインのコントロールに使われ、ピクセルで表わします。ボーダーラインを消したい場合は "BORDER=0"と入れて下さい。

　　USEMAP=URL

クライアント・サイド・イメージ・マップの作成に使われます。ここにはURLが入りますが、正確にはAタグのネイムアンカーのセクションでも出てきた URL fragment identifiesが入ります。イメージ・マップの作り方は MAPエレメントを参照して下さい。

　　ISMAP

サーバー・サイド・イメージ・マップの作成に使われます。ISMAPはマップ上でセレクトされたロケーションをイメージ・マップ・プログラムの置かれているサーバーに送るためのアトリビュートです。

Notes:

• WWWで使用されるイメージ・ファイルのフォーマットはGIFとJPEGが一般的です。ほとんどのブラウザーがこれをサポートしています。
• ALTアトリビュートに記入するテキストにはマークアップをしないで下さい。ブラウザーによってはentitiesを含むことが出来ますが、全てのブラウザーがサポートしているわけではありません。
• ALTは必ず入れなければいけない訳ではありませんが、グラフィックが特別な意味を持っている場合などは特にALTテキストを入れておいた方がいいでしょう。あるいはデコレーションとして使っている場合などはALT="*"と入れてみて下さい。
• WIDTH や HEIGHTのサイズが間違っている場合は本来は無効になる筈ですが、ブラウザーによっては指示されたサイズにイメージをリサイズして表示します。グラフィックによっては非常に見ずらくなる場合が多いのでサイズは正確に入れて下さい。
• ブラウザーによってはリンクに使われたイメージの回りにボーダーラインを付けないものもあります。これらのブラウザーではBORDERアトリビュートは使用できません。

Copyright (C) 1997 ABACUSS LTD.
www.abacuss.com