<<PREV | TOP | NEXT>>

IMG Element

last modified 10th/Oct. 2000

  1. 画像要素
  2. IMG 要素の基本
    1. 代替テキストの指定 - alt 属性と title 属性の利用
    2. 画像をより軽快に - フォーマットなど
  3. 画像の垂直方向の表示位置
  4. 浮動化と後続テキストの周りこみ
  5. 周囲に空白を挿入
  6. 周囲にボーダーを表示

IMG 要素は %special に属するインライン要素です。

画像を挿入する要素です。

<p>
画像を挿入します。
<img src="../back.jpg" alt="骸骨">
</p>

ここでは、挿入する画像ファイルの位置 (../back.jpg) を、当該文書の基準 URL に対する相対 URL で指定しましたが、勿論フル URL でも指定できます。

<!-- To avoid problems with text-only UAs as well as
   to make image content understandable and navigable
   to users of non-visual UAs, you need to provide
   a description with ALT, and avoid server-side image maps -->
<!ELEMENT IMG - O EMPTY                -- Embedded image -->
<!ATTLIST IMG
  %attrs;                              -- %coreattrs, %i18n, %events --
  src         %URI;          #REQUIRED -- URI of image to embed --
  alt         %Text;         #REQUIRED -- short description --
  longdesc    %URI;          #IMPLIED  -- link to long description
                                          (complements alt) --
  name        CDATA          #IMPLIED  -- name of image for scripting --
  height      %Length;       #IMPLIED  -- override height --
  width       %Length;       #IMPLIED  -- override width --
  usemap      %URI;          #IMPLIED  -- use client-side image map --
  ismap       (ismap)        #IMPLIED  -- use server-side image map --
  align       %IAlign;       #IMPLIED  -- vertical or horizontal alignment --
  border      %Pixels;       #IMPLIED  -- link border width --
  hspace      %Pixels;       #IMPLIED  -- horizontal gutter --
  vspace      %Pixels;       #IMPLIED  -- vertical gutter --
  >
<!-- USEMAP points to a MAP element which may be in this document
  or an external document, although the latter is not widely supported -->

IMG 要素は開始タグは必須ですが終了タグが存在しない空要素です。属性は、 src 属性と alt 属性が必須 (#REQUIRED) とされています。

IMG 要素が持ち得る属性の主なものを説明します；

src = uri [CT]
alt = text [CS]
longdesc = uri [CT]
width = length [CN]
height = length [CN]
name = cdata [CI]
border = pixels [CN]
align = bottom|middle|top|left|right
hspace = pixels [CN]
vspace = pixels [CN]

width 属性などで利用する length は、ピクセル数か、利用可能な空間のサイズに対するパーセンテイジが利用できます。このとき、もとになる量が画像の大きさではないことに注意して下さい。

基本的な画像要素

<p>日本では「モナリザ」 (Monna Lisa; vers 1503-1506)
<img
   src="http://www.louvre.or.jp/louvre/img/photos/collec/peint/vignet/inv0779.jpg"
   alt="Les visages de la Joconde" width="84" height="130"
   logdesc="http://www.louvre.or.jp/louvre/francais/magazine/joconde/txtjocon.htm">
として知られるダビンチ (Leonard de Vinci) の傑作は、ルーブル美術館に所蔵されています。</p>
IMG 要素の属性とその値
src 属性画像の所在地
http://www.louvre.or.jp/louvre/img/photos/collec/peint/vignet/inv0779.jpg
alt 属性画像の代替テキスト
Les visages de la Joconde
longdesc 属性alt 属性を補足する外部文書の所在地
http://www.louvre.or.jp/louvre/francais/magazine/joconde/txtjocon.htm

日本では「モナリザ」 (Monna Lisa; vers 1503-1506) Les visages de la Joconde として知られるダビンチ (Leonard de Vinci) の傑作は、ルーブル美術館に所蔵されています。

OBJECT 要素による実現

IMG 要素は OBJECT 要素で置き換えるように推奨されています。

<body>
<p>旅行から戻りました! 湖畔での家族写真です:
<img src="http://www.somecompany.com/people/ian/vacation/family.png"
     alt="湖畔での家族写真">
</p>
</body>

この埋め込みは、 OBJECT 要素では次のように実現できます。

<body>
<p>休暇から戻りました! 湖畔での家族写真です:
<object data="http://www.somecompany.com/people/ian/vacation/family.png"
        type="image/png">
湖畔での家族写真
</object>
</p>
</BODY>

<<PREV | TOP | NEXT>>

SEO [PR] !uO z[y[WJ Cu