Image Tag

＜ＩＭＧ＞タグ

インラインイメージ

インラインイメージというのは、HTMLページの中に直接張り込む画像をいい、より効果の大きなページを作る事が可能です。インラインイメージを張り込む場合、<IMG>タグを用います。このタグはワンサイドタグで、終了タグはありません。<IMG>タグには、SRC、 ALTとALIGNという属性があり、画像ファイルの指定やテキストとの位置関係を指定します(NetscapeやHTML3.0では、もっとたくさんの属性があります)。インラインイメージとして扱えるイメージフォーマットとブラウザの関係を下表に示します。

各ブラウザがインラインイメージをサポートするフォーマット一覧
	Mosaic 2.7	Netscape1.1	Netscape 2.0	MSIE 2.0	MSIE 3.0
GIF87	○	○	○	○	○
GIF89a(透明)	○	○	○	○	○
GIF89a(インターレース)	×	○	○	○	○
GIF89a(アニメーション)	×	×	○	×	○
JPEG	○	○	○	○	○
Progressive JPEG	△(効果なし)	×	○	×	○
PNG	○	×	×	×	×

SRC属性は張り込みたい画像ファイルのパス名指定します。例えば、 image.gifというファイルを張り込む場合、画像ファイルが、ページのあるファイルと同じディレクトリにあれば、

<IMG SRC="image.gif">

また、上にあれば、

<IMG SRC="../image.gif">

のように指定します。これは絶対パス、相対パスのどちらでも指定できます。例えば、次のように記述した場合、

<IMG SRC="sunshine.gif">

下図のようになります。

外部メディアの取り扱い

HTMLで外部メディアを指定するには、ハイパーリンク時に用いていた <A>タグのHREF属性を用います。HREF属性に外部メディアファイルのパス名を指定するだけです。

<A HREF="外部メディアファイルのパス">ポインタ</A>

外部メディアを実際に表示するのは、外部メディアをなんらかの形でデコードして表示できるクライアント側の外部プログラムです。例えば、NCSA Mosaic の場合、JPEG を表示するならxvプログラム、音声を表示するなら showaudio プログラムといったように、WWWブラウザ毎に決められています。追加や変更は簡単で、NCSA Mosaic の場合、~/.mailcapまたは /usr/local/lib/mosaic/mailcapで変更します。JPEGファイルやクイックタイムムービを外部メディアとして扱う場合、次のように記述します。

<A HREF="Geisha-girl.jpg">芸者</A>
<A HREF="Gion.mov">祇園</A>

この方法は、大きなGIFファイルを外部プログラムで表示させたい、すなわちユーザにもっと正確な図を見たいかを選択してもらう場合にも用いることができます。例えば、以下のようにHTMLを記述すれば、小さなインラインイメージがボタンとして機能して、ユーザがそのインラインイメージをクリックすることによって、大きなGIFイメージを見る事ができます。このGIFイメージをJPEG イメージに変更すれば、複雑な色を表現するイメージを表示できます。

<A HREF="img/big-foo.gif"><IMG SRC="img/small-foo.gif"></A>

例えば、次のように指定した場合、

<A HREF="big-sun.gif"><IMG SRC="sunshine.gif"></A>

下図のようになります。

この画像をクリックするとより大きな画像が表示されます。

イメージとテキスト

<IMG>タグでには、テキストとイメージの整列関係を制御する ALIGN属性があります。HTML2.0 では以下の指定が可能です。

ALIGN=TOP: 図の上部にテキストを合わせる
ALIGN=MIDDLE: 図の中央部にテキストを合わせる
ALIGN=BOTTOM: 図の下部にテキストを合わせる

下図の例では、ALIGN=TOP、ALIGN=MIDDLE、 ALIGN=BOTTOMの順番で設定してあります。

アイコンアイコンアイコン

なお、HTML 2.0 では、テキスト部が折り返されても、テキストの回り込みはされませんが、Netscape、Microsoft Internet Explorer や HTML 3.0 で可能となっています。

指定した画像がない場合の処理

多くのブラウザでは指定した画像が存在しない場合や表示ができなかった場合、その画像を示す仮画像(多くはアイコン)を表示します。わざわざ図を作らなくてもテストができるので、大変便利で重宝します。以下にNCSA Mosaicと Netscapのブラウザのアイコンを示しますが、他のブラウザでも同様のアイコンをサポートしています。

NCSA Mosaic (Xウィンドウ版)のアイコン
Netscape のアイコン

>画像とハイパーリンク <IMG>タグをハイパーリンクのポイントにすることも可能です。前の例にもありましたが、画像をポイントにすると図のどこかをクリックするとリンク先の文書に移動できます。ハイパーリンクのポイントとなった図の周りには仕切りが現れます。但し、<IMG>タグでBORDER=0とした場合、Netscape や Microsoft Internet Explorer では仕切りが表示されません。

ホームページへ

<A HREF="/index.html"><IMG SRC="home.gif">ホームページへ</A>

テキストのみのブラウザに対する処理

画像表示をサポートせずテキストのみを表示する Lynx のようなブラウザの場合、画像はロードされません。そうなるとページに何があるのかがわからなくなってしまう恐れがあるため、<IMG>タグにはテキストのみのブラウザに図の名称や意味をテキストで表示させるALT属性が使用できます。

Lynx の場合、ALT属性がなければ、<IMG>タグを使う画像部には [IMAGE]と表示されます。ALT属性を使うと [IMAGE]ではなく、ATLで指定されたテキストが表示されます。

<IMG SRC="beear.gif" ALT="[A Teddy Bear]">

とした場合、イメージを表示可能なWWWブラウザでは下図のように表示され、

[A Teddy Bear]

イメージを表示できないブラウザ(ここではLynx)の場合、下図のように表示されます。

Lynxブラウザ画面

Netscape による拡張

Netscape のIMGタグの拡張は、以下のようにたくさんの拡張が行われています。

より多くの位置の指定。
テキストの回り込み機能
図の大きさの指定
図の枠幅の指定
画像の二重読み込み
インラインJPEG、インタレースGIF

図の位置

ALIGN属性によって図の張り付ける場所を指定できましたが、その指定位置が増えました。

HTML	テキスト、図の開始位置
top	図の頂点
texttop	テキストのみ
middle	図の中央
absmiddle	全体の図・テキストを高さとした中央
baseline	図のベースライン
bottom	図の下部
absbottom	全体の図・テキストを高さとした下部

図の開始位置は、左下を起点とします。

<H4>Middle of Text and Line aligned: (MIDDLE, TOP, TEXTTOP)</H4>

<IMG SRC="img/4x100.gif" ALIGN=MIDDLE> <TT>ALIGN=TOP</TT>
<IMG SRC="img/3lines.gif" ALIGN=TOP> <TT>ALIGN=TEXTTOP</TT>
<IMG SRC="img/3lines.gif" ALIGN=TEXTTOP> <TT>Text ...</TT>

<H4>Top of Text and Line aligned: (TOP, ABSMIDDLE, MIDDLE)</H4>

<IMG SRC="img/4x100.gif" ALIGN=TOP> <TT>ALIGN=ABSMIDDLE</TT>
<IMG SRC="img/3lines.gif" ALIGN=ABSMIDDLE> <TT>ALIGN=MIDDLE</TT>
<IMG SRC="img/3lines.gif" ALIGN=MIDDLE> <TT>Text ...</TT>

<H4>Top of Text and Line aligned: (TOP, BASELINE, ABSBOTTOM)</H4>

<IMG SRC="img/4x100.gif" ALIGN=TOP> <TT>ALIGN=BASELINE(BOTTOM)</TT>
<IMG SRC="img/3lines.gif" ALIGN=BASELINE> <TT>ALIGN=ABSBOTTOM</TT>
<IMG SRC="img/3lines.gif" ALIGN=ABSBOTTOM> <TT>Text ...</TT>

Middle of Text and Line aligned: (MIDDLE, TOP, TEXTTOP)

ALIGN=TOP

ALIGN=TEXTTOP

Text ...

Top of Text and Line aligned: (TOP, ABSMIDDLE, MIDDLE)

ALIGN=ABSMIDDLE

ALIGN=MIDDLE

Text ...

Top of Text and Line aligned: (TOP, BASELINE, ABSBOTTOM)

ALIGN=BASELINE(BOTTOM)

ALIGN=ABSBOTTOM

Text ...

横方向の位置

<IMG SRC="img/3lines.gif" ALIGN=left HSPACE=10>
テキストと図が1行つづ階段上に降りておきます。
<IMG SRC="img/3lines.gif" ALIGN=left HSPACE=10>
図と図の間には10ピクセル分の隙間が設定しています。
<IMG SRC="img/3lines.gif" ALIGN=left HSPACE=10>
テキストと図が1行つづ階段上に降りておきます。
<IMG SRC="img/3lines.gif" ALIGN=left HSPACE=10>
図と図の間には10ピクセル分の隙間が設定しています。
<IMG SRC="img/3lines.gif" ALIGN=left HSPACE=10>
<BR CLEAR=all>

テキストと図が1行つづ階段上に降りておきます。図と図の間には10ピクセル分の隙間が設定しています。テキストと図が1行つづ階段上に降りておきます。図と図の間には10ピクセル分の隙間が設定しています。

両端に画像を、中央にテキストという整形は、次のように行います。

<IMG SRC="img/3lines.gif" ALIGN=left>
<IMG SRC="img/3lines.gif" ALIGN=right>
<BR>
<H3 ALIGN=center>中央にあるテキスト</h3>
<BR CLEAR=all>

中央にあるテキスト

縦方向の位置

ベーステキスト<IMG SRC="img/3lines.gif" ALIGN=bottom>
<IMG SRC="img/3lines.gif" ALIGN=middle>
<IMG SRC="img/3lines.gif" ALIGN=texttop>
<IMG SRC="img/3lines.gif" ALIGN=absmiddle>
<IMG SRC="img/3lines.gif" ALIGN=bottom><P>

ベーステキスト

イメージのサイズ指定

テキストの回り込みを行う際に、書類の表示を高速化するために図のサイズを指定します。図のサイズを指定することによって、図の表示を待たずにページのレイアウトがわかります。

テキストの回り込をします。テキストの回り込をします。テキストの回り込をします。テキストの回り込をします。テキストの回り込をします。テキストの回り込をします。

テキストの回り込をします。
テキストの回り込をします。

インラインイメージのサイズ指定

また、図の実サイズが指定したサイズと異なる場合、Netscape は指定したサイズに図を収めようとします。

<IMG SRC="redchile.gif"> Normal <BR>
<IMG SRC="redchile.gif" WIDTH=150 HEIGHT=50> 150x50 <BR>
<IMG SRC="redchile.gif" WIDTH=100 HEIGHT=50> 100x50 <BR>
<IMG SRC="redchile.gif" WIDTH=50 HEIGHT=50> 50x50

Normal
150x50
100x50
50x50

インラインイメージのサイズ変更

図の枠幅

図の枠幅を指定します。

<IMG SRC="kabe.gif" BORDER=0> <TT>BORDER=0</TT><P>
<IMG SRC="kabe.gif" BORDER=5> <TT>BORDER=5</TT><P>
<IMG SRC="kabe.gif" BORDER=10> <TT>BORDER=10</TT><P>

BORDER=0

BORDER=5

BORDER=10

インラインイメージの境界線

ハイパーリンクした場合は次のようになります。ここで注意する点として、 BORDER=0の場合、ハイパーリンクの証が示されません。これは、クリッカブルマップを使う場合、マップ全体の図にハイパーリンクの証を表示させたくない時に使用します。

BORDER=0

BORDER=5

BORDER=10

インラインイメージの境界線(ハイパーリンク時)

テキストの回り込み

特にALIGN属性がLEFTとRIGHTの場合は、図の空いている部分に文書等を埋めていく効果(テキストの回り込み機能またはフローティングイメージ効果)が得られます。その際、フローティングイメージの上下、左右のスペース(ピクセル値)を指定することもできます。次のように指定すると、図の左右横方向に50ピクセル分のスペースを空けます。

<IMG SRC="4x100.gif" HSPACE=50 ALIGN=LEFT>
This is wrapping text. This is wrapping text. This is wrapping text.
This is wrapping text. This is wrapping text. This is wrapping text.
<UL>
  <LI> This is wrapping text.
  <LI> This is wrapping text.
</UL>

これは回り込みテキストです。これは回り込みテキストです。これは回り込みテキストです。これは回り込みテキストです。これは回り込みテキストです。これは回り込みテキストです。

これは回り込みテキストです。
これは回り込みテキストです。

テキストの回り込みとインラインイメージの関係

イメージの二重読み込み

Netscapeでは二重に図を読み込ませることができます。この機能は最初に読み込ませた図の上に新しく読み込んだ図で上書きされて表示されます。そのため、一般に、予め解像度の悪い図を読み込ませ、その後に解像度の高い綺麗な図をゆっくり送ることによって、ユーザに早く図のイメージを理解させることを目的としています。IMGタグにおいて、LOWSRC属性で解像度の悪い図を指定しておきます。その後にSRC属性で指定した解像度の高い綺麗な図を読み込みます。この機能をサポートしていないブラウザでは SRC属性で指定した図を最初に読み込みます。

しかし、もっぱら最初の趣旨とは違った方法でも用いられる場合が多いようです。この機能は必ずしも解像度の悪いものから良いものの順番で読み込ませる必要はありません。例えば、白黒→カラー、異なる二つのインタレースGIFを使うと面白い効果があります。また、全く違うイメージを読み込ませて図の表示に変化を持たせる効果をねらうこともできます。

<IMG SRC="高解像度の図" LOWSRC="低解像度の図">

<IMG SRC="カラーの図" LOWSRC="白黒の図">

<IMG SRC="img/coldesk.gif" LOWSRC="img/monodesk.gif">

効果を見るために、画像の再ロード(Reload) をしてください。

[Up] [Next] [Previous]