[Up] [Next] [Previous]  [Home]

<IMG>タグ

インラインイメージ

インラインイメージというのは、HTMLページの中に直接張り込む画像をいい、 より効果の大きなページを作る事が可能です。インラインイメージを張り込む 場合、<IMG>タグを用います。このタグはワンサイドタグで、 終了タグはありません。<IMG>タグには、SRCALTALIGNという属性があり、画像ファイルの指定やテキ ストとの位置関係を指定します(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=TOPALIGN=MIDDLEALIGN=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タグの拡張は、以下のようにたくさんの拡張が行われています。

図の位置

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>

ベーステキスト

イメージのサイズ指定

<IMG WIDTH=value HEIGHT=value>

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

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

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


また、図の実サイズが指定したサイズと異なる場合、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 BORDER=value>

図の枠幅を指定します。

<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

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

テキストの回り込み

<IMG VSPACE=value HSPACE=value>

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

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

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

イメージの二重読み込み

<IMG SRC="URL" LOWSRC="URL">

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]  [Home]