TOP / Contents / Previous / Next / Index

Links and Images

1. A
2. IMG
3. MAP
4. AREA
5. Shape と Coords について

image を表示させる要素として、IMG がありますが、HTML 4では OBJECT も利用する事ができます。
(HTML 3.2では OBJECT は存在しません。)

A

• XHTML 1.0 Strict

  
  <!ENTITY % special.pre "br | span | bdo | map">
  <!ENTITY % special "%special.pre; | object | img ">
  
  <!ENTITY % fontstyle "tt | i | b | big | small ">
  <!ENTITY % phrase "em | strong | dfn | code | q | samp | kbd | var | cite | abbr | acronym | sub | sup ">
  <!ENTITY % inline.forms "input | select | textarea | label | button">
  <!ENTITY % misc.inline "ins | del | script">
  
  <!ENTITY % a.content "(#PCDATA | %special; | %fontstyle; | %phrase; | %inline.forms; | %misc.inline;)*">
  
  <!-- content is %Inline; except that anchors shouldn't be nested -->
  
  <!ELEMENT a %a.content;>
  <!ATTLIST a
    %attrs;
    %focus;
    charset     %Charset;      #IMPLIED
    type        %ContentType;  #IMPLIED
    name        NMTOKEN        #IMPLIED
    href        %URI;          #IMPLIED
    hreflang    %LanguageCode; #IMPLIED
    rel         %LinkTypes;    #IMPLIED
    rev         %LinkTypes;    #IMPLIED
    shape       %Shape;        "rect"
    coords      %Coords;       #IMPLIED
    >
  
  <!ENTITY % Shape "(rect|circle|poly|default)">
  <!ENTITY % Coords "CDATA">
  <!-- %Coords is comma separated list of lengths -->
  

• HTML 4 Strict

  <!ENTITY % fontstyle "TT | I | B | BIG | SMALL">
  <!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM">
  <!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">
  <!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">
  
  <!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
  
  <!ELEMENT A - - (%inline;)* -(A)       -- anchor -->
  <!ATTLIST A
    %attrs;                              -- %coreattrs, %i18n, %events --
    charset     %Charset;      #IMPLIED  -- char encoding of linked resource --
    type        %ContentType;  #IMPLIED  -- advisory content type --
    name        CDATA          #IMPLIED  -- named link end --
    href        %URI;          #IMPLIED  -- URI for linked resource --
    hreflang    %LanguageCode; #IMPLIED  -- language code --
    rel         %LinkTypes;    #IMPLIED  -- forward link types --
    rev         %LinkTypes;    #IMPLIED  -- reverse link types --
    accesskey   %Character;    #IMPLIED  -- accessibility key character --
    shape       %Shape;        rect      -- for use with client-side image maps --
    coords      %Coords;       #IMPLIED  -- for use with client-side image maps --
    tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
    onfocus     %Script;       #IMPLIED  -- the element got the focus --
    onblur      %Script;       #IMPLIED  -- the element lost the focus --
    >
  
  <!ENTITY % Shape "(rect|circle|poly|default)">
  <!ENTITY % Coords "CDATA" -- comma separated list of lengths -->
  

• XHTML 1.0 Transitional and Frameset

  <!ENTITY % special.extra "object | applet | img | map | iframe">
  <!ENTITY % special.basic "br | span | bdo">
  <!ENTITY % special "%special.basic; | %special.extra;">
  
  <!ENTITY % fontstyle.extra "big | small | font | basefont">
  <!ENTITY % fontstyle.basic "tt | i | b | u | s | strike ">
  <!ENTITY % fontstyle "%fontstyle.basic; | %fontstyle.extra;">
  
  <!ENTITY % phrase.extra "sub | sup">
  <!ENTITY % phrase.basic "em | strong | dfn | code | q | samp | kbd | var | cite | abbr | acronym">
  <!ENTITY % phrase "%phrase.basic; | %phrase.extra;">
  
  <!ENTITY % inline.forms "input | select | textarea | label | button">
  <!ENTITY % misc.inline "ins | del | script">
  
  <!ENTITY % a.content "(#PCDATA | %special; | %fontstyle; | %phrase; | %inline.forms; | %misc.inline;)*">
  
  <!-- content is %Inline; except that anchors shouldn't be nested -->
  
  <!ELEMENT a %a.content;>
  <!ATTLIST a
    %attrs;
    %focus;
    charset     %Charset;      #IMPLIED
    type        %ContentType;  #IMPLIED
    name        NMTOKEN        #IMPLIED
    href        %URI;          #IMPLIED
    hreflang    %LanguageCode; #IMPLIED
    rel         %LinkTypes;    #IMPLIED
    rev         %LinkTypes;    #IMPLIED
    shape       %Shape;        "rect"
    coords      %Coords;       #IMPLIED
    target      %FrameTarget;  #IMPLIED
    >
  
  <!ENTITY % Shape "(rect|circle|poly|default)">
  
  <!ENTITY % Coords "CDATA">
      <!-- comma separated list of lengths -->
  

• HTML 4 Transitional and Frameset

  <!ENTITY % fontstyle "TT | I | B | U | S | STRIKE | BIG | SMALL">
  <!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >
  <!ENTITY % special
     "A | IMG | APPLET | OBJECT | FONT | BASEFONT | BR | SCRIPT |
      MAP | Q | SUB | SUP | SPAN | BDO | IFRAME">
  <!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">
  
  <!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
  
  <!ELEMENT A - - (%inline;)* -(A)       -- anchor -->
  <!ATTLIST A
    %attrs;                              -- %coreattrs, %i18n, %events --
    charset     %Charset;      #IMPLIED  -- char encoding of linked resource --
    type        %ContentType;  #IMPLIED  -- advisory content type --
    name        CDATA          #IMPLIED  -- named link end --
    href        %URI;          #IMPLIED  -- URI for linked resource --
    hreflang    %LanguageCode; #IMPLIED  -- language code --
    target      %FrameTarget;  #IMPLIED  -- render in this frame --
    rel         %LinkTypes;    #IMPLIED  -- forward link types --
    rev         %LinkTypes;    #IMPLIED  -- reverse link types --
    accesskey   %Character;    #IMPLIED  -- accessibility key character --
    shape       %Shape;        rect      -- for use with client-side image maps --
    coords      %Coords;       #IMPLIED  -- for use with client-side image maps --
    tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
    onfocus     %Script;       #IMPLIED  -- the element got the focus --
    onblur      %Script;       #IMPLIED  -- the element lost the focus --
    >
  
  <!ENTITY % Shape "(rect|circle|poly|default)">
  <!ENTITY % Coords "CDATA" -- comma separated list of lengths -->
  

• HTML 3.2

  <!ENTITY % font "TT | I | B  | U | STRIKE | BIG | SMALL | SUB | SUP">
  <!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE">
  <!ENTITY % special "A | IMG | APPLET | FONT | BASEFONT | BR | SCRIPT | MAP">
  <!ENTITY % form "INPUT | SELECT | TEXTAREA">
  <!ENTITY % text "#PCDATA | %font | %phrase | %special | %form">
  
  <!ELEMENT A - - (%text)* -(A)>
  <!ATTLIST A
    name    CDATA   #IMPLIED    -- named link end --
    href    %URL    #IMPLIED    -- URL for linked resource --
    rel     CDATA   #IMPLIED    -- forward link types --
    rev     CDATA   #IMPLIED    -- reverse link types --
    title   CDATA   #IMPLIED    -- advisory title string --
    >
  

IMG

テキストブラウザや、画像が表示できない場合やしない場合に代わりに表示する内容を示す、alt属性は必須属性です。
XHTML 1.0 Strict のDTDには、「name属性は無い」と明記してあります。

2003/01/22 HTML 4.01 に従い修正

Addition of the name attribute for backwards compatibility.

• XHTML 1.0 Strict

  <!ELEMENT img EMPTY>
  <!ATTLIST img
    %attrs;
    src         %URI;          #REQUIRED
    alt         %Text;         #REQUIRED
    longdesc    %URI;          #IMPLIED
    height      %Length;       #IMPLIED
    width       %Length;       #IMPLIED
    usemap      %URI;          #IMPLIED
    ismap       (ismap)        #IMPLIED
    >
  

• HTML 4 Strict

  <!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 --
    >
  

• XHTML 1.0 Transitional and Frameset

  
  <!ELEMENT img EMPTY>
  <!ATTLIST img
    %attrs;
    src         %URI;          #REQUIRED
    alt         %Text;         #REQUIRED
    name        NMTOKEN        #IMPLIED
    longdesc    %URI;          #IMPLIED
    height      %Length;       #IMPLIED
    width       %Length;       #IMPLIED
    usemap      %URI;          #IMPLIED
    ismap       (ismap)        #IMPLIED
    align       %ImgAlign;     #IMPLIED
    border      %Length;       #IMPLIED
    hspace      %Pixels;       #IMPLIED
    vspace      %Pixels;       #IMPLIED
    >
  
  <!ENTITY % ImgAlign "(top|middle|bottom|left|right)">
  

• HTML 4 Transitional and Frameset

  <!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      %Length;       #IMPLIED  -- link border width --
    hspace      %Pixels;       #IMPLIED  -- horizontal gutter --
    vspace      %Pixels;       #IMPLIED  -- vertical gutter --
    >
  
  <!ENTITY % IAlign "(top|middle|bottom|left|right)" -- center? -->
  

• HTML 3.2

  <!ELEMENT IMG    - O EMPTY --  Embedded image -->
  <!ATTLIST IMG
    src     %URL     #REQUIRED  -- URL of image to embed --
    alt     CDATA    #IMPLIED   -- for display in place of image --
    align   %IAlign  #IMPLIED   -- vertical or horizontal alignment --
    height  %Pixels  #IMPLIED   -- suggested height in pixels --
    width   %Pixels  #IMPLIED   -- suggested width in pixels --
    border  %Pixels  #IMPLIED   -- suggested link border width --
    hspace  %Pixels  #IMPLIED   -- suggested horizontal gutter --
    vspace  %Pixels  #IMPLIED   -- suggested vertical gutter --
    usemap  %URL     #IMPLIED   -- use client-side image map --
    ismap   (ismap)  #IMPLIED   -- use server image map --
    >
  
  <!ENTITY % IAlign "(top|middle|bottom|left|right)">
  

MAP

クライアント側イメージマップを指定します。
IMG 要素 または OBJECT 要素 で、usemap 属性を設定して、MAP要素でリンク先を指定する事もできます。
その際 img要素 には usemap="#somename" を、MAP 要素には name="somename"を指定します。

html 4 では、AREA 要素 ではなく、A 要素で指定する事もできます。
ただし、一つのmap要素中ではAREA 要素 と A 要素の併用はできません。

HTML 4 では、name属性は CDATA でしたが、XHTML 1.0 では Transitional以外は NMTAKEN に変更されています。その心はわからん…

2000/01/24 HTML 4.01 に従い修正

Changed content model of MAP to ((%block;) | AREA)+ from ((%block;)+ | AREA+)

• XHTML 1.0 Strict

  <!ENTITY % heading "h1|h2|h3|h4|h5|h6">
  <!ENTITY % lists "ul | ol | dl">
  <!ENTITY % blocktext "pre | hr | blockquote | address">
  <!ENTITY % block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">
  
  <!ENTITY % misc.inline "ins | del | script">
  <!ENTITY % misc "noscript | %misc.inline;">
  
  <!ELEMENT map ((%block; | form | %misc;)+ | area+)>
  <!ATTLIST map
    %i18n;
    %events;
    id          ID             #REQUIRED
    class       CDATA          #IMPLIED
    style       %StyleSheet;   #IMPLIED
    title       %Text;         #IMPLIED
    name        NMTOKEN        #IMPLIED
    >
  

• HTML 4 Strict

  <!ENTITY % heading "H1|H2|H3|H4|H5|H6">
  <!ENTITY % list "UL | OL">
  <!ENTITY % preformatted "PRE">
  <!ENTITY % block
       "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
        BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
  
  <!ELEMENT MAP - - ((%block;) | AREA)+ -- client-side image map -->
  <!ATTLIST MAP
    %attrs;                              -- %coreattrs, %i18n, %events --
    name        CDATA          #REQUIRED -- for reference by usemap --
    >
  

• XHTML 1.0 Transitional

  <!ENTITY % heading "h1|h2|h3|h4|h5|h6">
  <!ENTITY % lists "ul | ol | dl | menu | dir">
  <!ENTITY % blocktext "pre | hr | blockquote | address | center | noframes">
  <!ENTITY % block "p | %heading; | div | %lists; | %blocktext; | isindex | fieldset | table">
  
  <!ENTITY % misc.inline "ins | del | script">
  <!ENTITY % misc "noscript | %misc.inline;">
  
  <!ELEMENT map ((%block; | form | %misc;)+ | area+)>
  <!ATTLIST map
    %i18n;
    %events;
    id          ID             #REQUIRED
    class       CDATA          #IMPLIED
    style       %StyleSheet;   #IMPLIED
    title       %Text;         #IMPLIED
    name        CDATA          #IMPLIED
    >
  

• XHTML 1.0 Frameset

  <!ENTITY % heading "h1|h2|h3|h4|h5|h6">
  <!ENTITY % lists "ul | ol | dl | menu | dir">
  <!ENTITY % blocktext "pre | hr | blockquote | address | center">
  <!ENTITY % block "p | %heading; | div | %lists; | %blocktext; | isindex | fieldset | table">
  
  <!ENTITY % misc.inline "ins | del | script">
  <!ENTITY % misc "noscript | %misc.inline;">
  
  <!ELEMENT map ((%block; | form | %misc;)+ | area+)>
  <!ATTLIST map
    %i18n;
    %events;
    id          ID             #REQUIRED
    class       CDATA          #IMPLIED
    style       %StyleSheet;   #IMPLIED
    title       %Text;         #IMPLIED
    name        NMTOKEN        #IMPLIED
    >
  

• HTML 4 Transitional and Frameset

  <!ENTITY % heading "H1|H2|H3|H4|H5|H6">
  <!ENTITY % list "UL | OL | DIR | MENU">
  <!ENTITY % preformatted "PRE">
  <!ENTITY % block 
       "P | %heading; | %list; | %preformatted; | DL | DIV | CENTER |
        NOSCRIPT | NOFRAMES | BLOCKQUOTE | FORM | ISINDEX | HR | TABLE | FIELDSET | ADDRESS">
  
  <!ELEMENT MAP - - ((%block;) | AREA)+ -- client-side image map -->
  <!ATTLIST MAP
    %attrs;                              -- %coreattrs, %i18n, %events --
    name        CDATA          #REQUIRED -- for reference by usemap --
    >
  

• HTML 3.2

  <!ELEMENT MAP - - (AREA)*>
  <!ATTLIST MAP
    name    CDATA   #IMPLIED
    >
  

AREA

同一の地点を複数の AREA 要素が指定していた場合は、はじめに出てきた AREA 要素が適用されます。

• XHTML 1.0 Strict

  <!ENTITY % Shape "(rect|circle|poly|default)">
  <!ENTITY % Coords "CDATA"> <!-- comma separated list of lengths -->
  
  <!ELEMENT area EMPTY>
  <!ATTLIST area
    %attrs;
    %focus;
    shape       %Shape;        "rect"
    coords      %Coords;       #IMPLIED
    href        %URI;          #IMPLIED
    nohref      (nohref)       #IMPLIED
    alt         %Text;         #REQUIRED
    >
  

• HTML 4 Strict

  <!ENTITY % Shape "(rect|circle|poly|default)">
  <!ENTITY % Coords "CDATA" -- comma separated list of lengths -->
  
  <!ELEMENT AREA - O EMPTY               -- client-side image map area -->
  <!ATTLIST AREA
    %attrs;                              -- %coreattrs, %i18n, %events --
    shape       %Shape;        rect      -- controls interpretation of coords --
    coords      %Coords;       #IMPLIED  -- comma separated list of lengths --
    href        %URI;          #IMPLIED  -- URI for linked resource --
    nohref      (nohref)       #IMPLIED  -- this region has no action --
    alt         %Text;         #REQUIRED -- short description --
    tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
    accesskey   %Character;    #IMPLIED  -- accessibility key character --
    onfocus     %Script;       #IMPLIED  -- the element got the focus --
    onblur      %Script;       #IMPLIED  -- the element lost the focus --
    >
  

• XHTML 1.0 Transitional and Frameset

  <!ENTITY % Shape "(rect|circle|poly|default)">
  <!ENTITY % Coords "CDATA"> <!-- comma separated list of lengths -->
  
  <!ELEMENT area EMPTY>
  <!ATTLIST area
    %attrs;
    %focus;
    shape       %Shape;        "rect"
    coords      %Coords;       #IMPLIED
    href        %URI;          #IMPLIED
    nohref      (nohref)       #IMPLIED
    alt         %Text;         #REQUIRED
    target      %FrameTarget;  #IMPLIED
    >
  

• HTML 4 Transitional and Frameset

  <!ENTITY % Shape "(rect|circle|poly|default)">
  <!ENTITY % Coords "CDATA" -- comma separated list of lengths -->
  
  <!ELEMENT AREA - O EMPTY               -- client-side image map area -->
  <!ATTLIST AREA
    %attrs;                              -- %coreattrs, %i18n, %events --
    shape       %Shape;        rect      -- controls interpretation of coords --
    coords      %Coords;       #IMPLIED  -- comma separated list of lengths --
    href        %URI;          #IMPLIED  -- URI for linked resource --
    target      %FrameTarget;  #IMPLIED  -- render in this frame --
    nohref      (nohref)       #IMPLIED  -- this region has no action --
    alt         %Text;         #REQUIRED -- short description --
    tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
    accesskey   %Character;    #IMPLIED  -- accessibility key character --
    onfocus     %Script;       #IMPLIED  -- the element got the focus --
    onblur      %Script;       #IMPLIED  -- the element lost the focus --
    >
  

• HTML 3.2

  <!ENTITY % SHAPE "(rect|circle|poly)">
  <!ENTITY % COORDS "CDATA" -- comma separated list of numbers -->
  
  <!ELEMENT AREA - O EMPTY>
  <!ATTLIST AREA
    shape   %SHAPE  rect
    coords  %COORDS #IMPLIED  -- defines coordinates for shape --
    href    %URL    #IMPLIED  -- this region acts as hypertext link --
    nohref (nohref) #IMPLIED  -- this region has no action --
    alt     CDATA   #REQUIRED -- needed for non-graphical user agents --
    >
  

Shape と Coords について

<!ENTITY % Shape "(rect|circle|poly|default)">
<!ENTITY % Coords "CDATA" -- comma separated list of lengths -->

default

全体を指定。Coords なし。HTML 4.0から登場

rect

四角形。coords = "左上のx座標,左上のy座標,右下のx座標,右下のy座標"

circle

円。coords = "中心のx座標,中心のy座標,半径"

poly

多角形。coords = "点1のx座標,点1のy座標,点2のx座標,点2のy座標,...,"

TOP / XHTML

Copyright (c) 1999,2000,2002,2003 Yuuichirou Oka
[E-mail] avex-freak@ma1.seikyou.ne.jp
All right reserved. International copyright secured.