img要素

説明

<img src="..." alt="...">　空要素

img要素は、src属性で指定した画像ファイルを表示します。画像ファイルとして一般的なのはJPEG(じぇいぺぐ)やGIF(じふ)形式などですが、比較的新しいブラウザではPNG(ぴーえぬじー)形式もサポートしているようです。

HTML4.0以降では、src属性に加えてalt属性が必須属性とされています。画像の表示されないブラウザや音声ブラウザに対して画像の代わりとなる代替テキストを記述します。見出しや装飾のために使用する内容のないイメージなどには、alt=""のように空のテキストを指定します。

img要素にwidth属性とheight属性を指定しておくと、ブラウザ側で画像の表示スペースを事前に確保できるため、画像の後に続く内容をすばやく表示させることができます。

*1 alt属性は、ie7までは「チップヘルプ」として表示されましたが、ie8からWeb標準(W3Cの仕様)に従い、その仕様は廃止されました。ie8以降で「チップヘルプ」を表示する際にはtitle属性を使用します。

属性 (W3C)

<img

H2- ie1- N1-

一般属性

id class style title lang dir %events;

src="URI"

H2- ie1- N1-
[必須] 画像URI　

参照

alt="文章"

H2- ie1- N1-
[必須] 代替文

longdesc="URI"

H4- N6-
説明文URI　

参照

name="名前"

H4-x1 ie4- N3-
画像名
スクリプトから参照名。識別子にはid属性を用いるべきです。

heigth="長さ"

H3- ie1- N1-
高さ
N(px)、S%で指定。

width="長さ"

H3- ie1- N1-
横幅
N(px)、S%で指定。

usemap="URI"

H3- ie1- N2-
イメージマップ名
#記号を頭につけた名前で指定。　

詳細

参照

ismap

H2- ie1- N1-
サーバ側のイメージマップ

align="位置" (非推奨)

H2-x1 ie1- N1-
文字との位置関係　

詳細

top	画像上部と文字一行を揃えて表示
middle	画像中央と文字一行を揃えて表示
bottom	画像下部と文字一行を揃えて表示 (初期値)
left	左に画像を浮動、右に文字を回り込み表示
right	右に画像を浮動、左に文字を回り込み表示

border="ピクセル" (非推奨)

H3-x1 ie1- N1-
リンク時の枠線幅

hspace="ピクセル"　(非推奨)

H3-x1 ie1- N1-
上下の余白

vspace="ピクセル"　(非推奨)

H3-x1 ie1- N1-
左右の余白

ブラウザ独自の属性 (ie N)

controls=""

ie2-
未調査

dynsrc="URI"

ie2-
AVIムービーURI

galleryimg="値"

ie6-
イメージツールバーの使用
(yes|true|no|false)

loop="(回数|infinite)"

ie2-
AVIムービーの再生回数

loopdelay="秒数"

ie2-
AVIムービーの再生間隔

lowsrc="URI"

ie4- N1-6
ロード中の仮画像

sdapref=""

H2
未調査

start="値"

ie2-
AVIムービー再生のタイミング

fileopen	ロード後
mouseover	マウスポイント時

suppress="(true|false)"

N4
未調査

vrml=""

ie2-
未調査

使用例


<img src="img/house1.jpg" alt="ペルージャの家" width="102" height="76">

画像によるリンク


<a href="anchor3.htm"><img src="img/house1.jpg" alt="ペルージャの家" width="102" height="76"></a>

<!-- H2-x1 ie1- N1- -->

イメージを用いたリンクでは、デフォルトで2px程度の枠線が表示されます。この枠線を消すためには、img要素の属性にborder="0"と指定します。


<a href="anchor3.htm"><img src="img/house1.jpg" alt="ペルージャの家" width="102" height="76" border="0"></a>

<!-- H2-x1 ie1- N1- -->

しかしながら、img要素のborder属性は、非推奨な属性とされています。非推奨なborder属性に代わる記述には、スタイルシートのborder-widthあるいはborderプロパティを用います。


<a href="anchor3.htm"><img src="img/house1.jpg" alt="ペルージャの家" width="102" height="76"

 style="border-width:0;"></a>    <!-- H2- ie1- N1- -->


<a href="anchor3.htm"><img src="img/house1.jpg" alt="ペルージャの家" width="102" height="76"

 style="border:none;"></a>    <!-- H2- ie1- N1- -->

画像の下の隙間

<img src="xxx.gif" alt="">の後ろにスペースや改行を入れると、画像の下に隙間が表示されます。これを回避するためには、


<img src="xxx.gif" alt=""><img

src="yyy.gif" alt="">

のようにタグ内で改行するか、


<img src="xxx.gif" alt=""><!--

--><img src="yyy.gif" alt="">

のようにHTMLのコメントを併用してソースを改行します。

img要素 画像 (Embedded image)

説明

属性 (W3C)

ブラウザ独自の属性 (ie N)

使用例

画像によるリンク

画像の下の隙間

img要素画像 (Embedded image)