ここでは,画像の挿入,すなわち img
要素を詳説する。
img
要素 img
要素は,画像を挿入するための要素である。この要素はインライン要素(%Inline.mix;
)に含まれ,要素の内容をもたない(空要素タグで記述)。
EMPTY
属性名 | 属性値 | 備考 |
---|---|---|
コア属性 | ||
style 属性 | ||
国際化に関する属性 | ||
イベント属性 | ||
src | URI | 必須:挿入する画像のの URI |
alt | テキスト | 必須:画像に対する代替テキスト |
longdesc | URI | その画像について詳細な記述のある URI |
width | 長さ | その画像の幅 |
height | 長さ | その画像の高さ |
usemap | ID | その画像へのイメージマップを定義している(map 要素の)ID |
ismap | ismap | ブール値属性:その画像をサーバサイドイメージマップに使用する |
usemap
属性については,クライアントサイドイメージマップの項で述べることにする。また,ismap
属性についてはサーバサイドイメージマップの項で述べることにする。
必須の src
属性に挿入する画像の URI を与えることは,Let's begin XHTML の Section 7 で解説した。
また,alt
属性も必須で,画像の性質,画像が挿入されているコンテキスト(文脈)に応じて適切な“代替テキスト”を与える必要がある。これは,画像が読み込めないときに表示されるテキスト,ページリーダで読まれるテキストなどに使われる。詳しくは Let's begin XHTML の Section 8 で解説したが,概略を復習しておくと,
alt=""
”(空の文字列)としておく。のような感じである。
longdesc
属性は,alt
属性と対照的に,その画像について長い説明が記されているリソースの URI を(必要であれば)与える。たとえば,本チュートリアル Section 13 の図 13.1 には,longdesc
属性に“図版について”のページの,当該の図の項目の URL が指定されている。Netscape 6 以降では,これを“画像のプロパティ”で確認することができる(たとえば,図 15.1)。
また,本チュートリアルもこの方法を使用しているが,画像の直近に“[D]”のような文字列を挿入し,それにこの longdesc
属性の値をリンク先として設定しておくことも併用される。
width
属性 および height
属性は,挿入する図の寸法を明示する。一般に,WWW で使用される GIF,JPEG,PNG 形式の画像は,固有の寸法(ピクセルサイズ)を持っており,無指定の場合はこの“固有の寸法”で出力される。しかし,描画をスムーズにするため,画像の固有の寸法を明示的に指定しておくほうがよい。
width
および height
属性の与え方は 2 とおりあり,
%
」を伴うと,このときの基準は,幅(width
属性),高さ(height
属性)それぞれいっぱいに表示できる幅を 100% とする(固有の寸法に対する割合ではない)いずれの場合も,固有の寸法と異なった場合は拡大・縮小処理がなされる(拡大・縮小はブラウザ側が行うので,ダウンロードサイズ(ページの“重さ”)は変わらないことに注意)。width
および height
属性のうち片方が指定されている状況では,画像は縦横比を保ったまま拡大・縮小される。
本節の最後に,例として上にあげた“図 15.1”(URI は“f15-01.gif
”,ピクセルサイズは横 388 ピクセル,縦 121 ピクセル)の部分のコードを示しておこう。なお,img
要素はインライン要素のため,キャプションなどを含めたコンテナとして class
属性に“fig
”を指定した div
要素を使用していることに注意されたい。
<div class="fig" id="f15-01"><img src="f15-01.gif" alt="longdesc 属性の内容は,Netscape 6 以降で確認できる。" width="388" height="121" longdesc="hsxhad.htm#f15-01" /><br />図 15.1 <a href="hsxhad.htm#f15-01" class="internal" title="この図版について">[D]</a></div>