|
|
|
|||||||||||
| 機能 | 画像を配置する | |
|---|---|---|
| 属性 | HTML-4.01 | コア 言語 イベント src alt longdesc name height width usemap ismap |
| XHTML-1.0 | コア 言語 イベント src alt longdesc height width usemap ismap | |
| 備考 | 空要素 | |
<img>タグは画像を配置します。開始タグと終了タグで囲む要素がない「空要素」なので、ほとんどの場合、省略形である<img />と記述されます。
src属性画像ファイルが保存されている場所(パス)を指定します。この属性は必須となります。指定するパスは絶対パス、相対パスのどちらでも構いません。
alt属性画像のかわりに表示されるテキストを指定します。ブラウザで画像が表示されないときや、画像を表示させないように設定されている場合、このテキストが表示されます。ブラウザによっては、画像にマウスポインタを重ねるとポップアップ表示するものもあります。画像を使用する場合はこのalt属性も記述しておくようにしましょう。
<html>
<head>
<title><img>タグの例</title>
</head>
<body>
<img src="/images/example/img_sample.gif" alt="マスコットキャラクター画像" />
</body>
</html>
longdesc属性alt属性と同様の機能ですが、より長い説明文を指定する際に使用します。ただし、サポートしているブラウザはほとんどありません。
height属性、width属性height属性とwidth属性を使用すると、画像の大きさを変更することができます。height属性は画像の高さ(縦)を、width属性は幅(横)を指定します。height属性とwidth属性のどちらか一方のみを指定すると、縦横比を保ったまま拡大/縮小表示します。
<html>
<head>
<title><img>タグの例</title>
</head>
<body>
<img src="/images/example/img_sample.gif" alt="マスコットキャラクター画像" />
<img src="/images/example/img_sample.gif" alt="マスコットキャラクター画像" height="200px" />
<img src="/images/example/img_sample.gif" alt="マスコットキャラクター画像" width="50px" />
<img src="/images/example/img_sample.gif" alt="マスコットキャラクター画像" height="50px" width="200px" />
<img src="/images/example/img_sample.gif" alt="マスコットキャラクター画像" width="10%" width="10%" />
</body>
</html>
CSSを使用すれば、このheight属性、width属性と同等のことが可能です。画像の大きさを変更することは表示スタイルに関することなので、なるべくCSSを使用するようにしてください。
usemap属性、ismap属性usemap属性とismap属性は、この<img>タグで配置されている画像がイメージマップ用の画像であることを指定します(イメージマップと、その使用例については、<map>タグを参照してください)。
usemap属性usemap属性によるイメージマップの指定はブラウザによって処理されるイメージマップ(クライアントサイドイメージマップという)であることを意味します。この方法によるイメージマップは、<map>タグによって定義されます。
usemap属性の値には、参照する<map>タグのパス(名前)を指定しますが、通常、同じページ内に<map>タグを記述するので、#を付けて、参照する<map>タグの名前(name属性の値)を記述しておきます。
ismap属性ismap属性によるイメージマップの指定はサーバによって処理されるイメージマップ(サーバサイドイメージマップという)であることを意味します。どのような動作をするかは、サーバ側のプログラムに委ねられます。値にはismapを指定しておきます(「ismap="ismap"」と記述しておきます)。
name属性name属性は、画像に名前を付けるために使用します。このname属性を使用するとプログラムによって画像の表示を操作するのに便利です。