1. 4.8.12 The map element
      2. 4.8.13 The area element
      3. 4.8.14 Image maps
        1. 4.8.14.1 Authoring
        2. 4.8.14.2 Processing model

4.8.12 The map element

Element/map

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLMapElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
透過的
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
Global attributes
nameusemap属性から参照するイメージマップ
Accessibility considerations:
For authors.
For implementers.
DOMインターフェイス
[Exposed=Window]
interface HTMLMapElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString name;
  [SameObject] readonly attribute HTMLCollection areas;
};

map要素は、img要素および任意のarea要素の子孫と連動して、イメージマップを定義する。要素は、その子を表す

name属性は、マップを参照できるようマップに名前を与える。属性は存在しなければならず、ASCII空白文字なしで非空白の値を持たなければならない。name属性の値は、同じツリーで別のmap要素のname属性の値と同じであってはならない。id属性もまた指定される場合、両方の属性が同じ値を持たなければならない。

map.areas

maparea要素のHTMLCollectionを返す。

areas属性は、フィルターがarea要素のみに一致する、map要素でルートとなるHTMLCollectionを返さなければならない。

name IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。

イメージマップは、メンテナンスを容易にするために、ページ上の他のコンテンツと組み合わせて定義できる。この例は、ページの上部に、イメージマップと下部のテキストリンクの対応するセットを使用したページである。

<!DOCTYPE HTML>
<HTML LANG="EN">
<TITLE>Babies™: Toys</TITLE>
<HEADER>
 <H1>Toys</H1>
 <IMG SRC="/images/menu.gif"
      ALT="Babies™ navigation menu. Select a department to go to its page."
      USEMAP="#NAV">
</HEADER>
 ...
<FOOTER>
 <MAP NAME="NAV">
  <P>
   <A HREF="/clothes/">Clothes</A>
   <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
   <A HREF="/toys/">Toys</A>
   <AREA ALT="Toys" COORDS="100,0,200,50" HREF="/toys/"> |
   <A HREF="/food/">Food</A>
   <AREA ALT="Food" COORDS="200,0,300,50" HREF="/food/"> |
   <A HREF="/books/">Books</A>
   <AREA ALT="Books" COORDS="300,0,400,50" HREF="/books/">
  </P>
 </MAP>
</FOOTER>

4.8.13 The area element

Element/area

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLAreaElement

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
カテゴリー
フローコンテンツ
フレージングコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所、ただし先祖map要素が存在する場合のみに限る。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
Global attributes
alt — 画像が利用不可である場合に使用する代用テキスト
coordsイメージマップ内に作成する図形の座標
shapeイメージマップ内に作成する図形の種類
hrefハイパーリンクのアドレス
targetNavigable for hyperlink navigation
download — Whether to download the resource instead of navigating to it, and its filename if so
pingURLへのping
relハイパーリンクを含む文書における位置と宛先のリソースの関係
referrerpolicy — 要素によって開始されたフェッチのためのリファラポリシー
Accessibility considerations:
If the element has an href attribute: for authors; for implementers.
Otherwise: for authors; for implementers.
DOMインターフェイス
[Exposed=Window]
interface HTMLAreaElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString alt;
  [CEReactions] attribute DOMString coords;
  [CEReactions] attribute DOMString shape;
  [CEReactions] attribute DOMString target;
  [CEReactions] attribute DOMString download;
  [CEReactions] attribute USVString ping;
  [CEReactions] attribute DOMString rel;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList relList;
  [CEReactions] attribute DOMString referrerPolicy;

  // also has obsolete members
};
HTMLAreaElement includes HTMLHyperlinkElementUtils;

area要素は、テキストとイメージマップで領域に対応をもつハイパーリンク、またはイメージマップ上の不感領域のいずれかを表す

親ノードとともにarea要素は、map要素の祖先を持たなければならない。

area要素がhref属性を持つ場合、area要素はハイパーリンクを表す。この場合、alt属性が存在しなければならない。この属性は、ハイパーリンクのテキストを指定する。属性値は、イメージマップの他のハイパーリンクに指定されるテキストを伴い、かつ画像の代替テキストを伴うが、画像なしで提示された場合、テキストでなければならず、テキストなしだが画像に適用される形状を伴うような場合、ハイパーリンクとして同じ選択の種類をユーザーに提供しなければならない。同じリソースを指すイメージマップと非空白のalt属性を持つ別のarea要素が存在する場合、alt属性は空白のままであってもよい。

area要素がhref属性を持たない場合、その要素によって表される領域を選択できず、alt属性を省略しなければならない。

どちらの場合も、shapecoords属性は領域を指定する。

The shape attribute is an enumerated attribute with the following keywords and states:

キーワードConforming状態概要
circleCircle stateDesignates a circle, using exactly three integers in the coords attribute.
circNo
defaultDefault stateThis area is the whole image. (The coords attribute is not used.)
polyPolygon stateDesignates a polygon, using at-least six integers in the coords attribute.
polygonNo
rectRectangle stateDesignates a rectangle, using exactly four integers in the coords attribute.
rectangleNo

The attribute's missing value default and invalid value default are both the rectangle state.

coords属性が指定される場合、浮動小数点数の妥当なリストを含まなければならない。この属性は、shape属性によって記述された図形の座標を与える。この属性に対する処理は、イメージマップ処理モデルの一部として説明される。

circle stateにおいて、area要素は、最後の整数は非負でなければならない、3つの整数とともに、存在するcoords属性を持たなければならない。最初の整数は画像の左端から円の中心までのCSSピクセル単位距離でなければならず、2番目の整数は画像の上端から円の中心までのCSSピクセル単位距離でなければならず、3番目の整数はCSSピクセル単位距離で円の半径でなければならない。

In the default state, area elements must not have a coords attribute. (領域は全体の画像である。)

polygon stateにおいて、area要素は少なくとも6つの整数をもつcoords属性を持たなければならず、その整数は偶数個でなければならない。整数の各ペアは、CSSピクセルでそれぞれ画像の左からおよび上からの距離として指定された座標を表さなければならず、順に、すべての座標はポリゴンの点を表さなければならない。

rectangle stateにおいて、area要素は正確に4つの整数をもつcoords属性を持たなければならない。1番目の整数は3番目の整数未満でなければならず、2番目の整数は4番目の整数未満でなければならない。4点は、それぞれすべてCSSピクセルで、矩形の左側から画像の左辺までの距離、上側から上辺までの距離、左側から左辺までの距離、下側から上辺までの距離を表さなければならない。

When user agents allow users to follow hyperlinks or download hyperlinks created using the area element, the href, target, download, and ping attributes decide how the link is followed. rel属性は、ユーザーがリンクを辿る前に対象のリソースの見込みのある性質をユーザーに表すために使用されてもよい。

href属性が存在しない場合、targetdownloadpingrel、およびreferrerpolicy属性は省略しなければならない。

area要素でitempropが指定される場合、href属性も指定されなければならない。

HTMLAreaElement/rel

Support in all current engines.

Firefox30+Safari9+Chrome54+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer11
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The IDL attributes alt, coords, shape, target, download, ping, and rel, each must reflect the respective content attributes of the same name.

HTMLAreaElement/relList

Support in all current engines.

Firefox30+Safari9+Chrome65+
Opera41+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android41+

IDL属性relListは、relコンテンツ属性を反映しなければならない。

HTMLAreaElement/referrerPolicy

Support in all current engines.

Firefox50+Safari14.1+Chrome52+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

IDL属性referrerPolicyは、既知の値に制限されreferrerpolicyコンテンツ属性を反映しなければならない。

4.8.14 Image maps

4.8.14.1 Authoring

イメージマップは、ハイパーリンクに関連付けられるような画像で幾何学的な領域を可能にする。

An image, in the form of an img element, may be associated with an image map (in the form of a map element) by specifying a usemap attribute on the img element. The usemap attribute, if specified, must be a valid hash-name reference to a map element.

次のような画像を考えてみよう:

A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.

色付きの領域のみをクリック可能にしたい場合、次のようにするだろう:

<p>
 Please select a shape:
 <img src="shapes.png" usemap="#shapes"
      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
 <map name="shapes">
  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
        href="yellow.html" alt="Yellow star.">
 </map>
</p>
4.8.14.2 Processing model

If an img element has a usemap attribute specified, user agents must process it as follows:

  1. Parse the attribute's value using the rules for parsing a hash-name reference to a map element, with the element as the context node. This will return either an element (the map) or null.

  2. If that returned null, then return. 画像は、結局のところイメージマップに関連付けられない。

  3. そうでなければ、ユーザーエージェントは、mapの子孫である全area要素を収集しなければならない。それらをareasにする。

イメージマップ(areas)を形成するarea要素のリストを取得した、インタラクティブなユーザーエージェントは、2つのうちどちらかの方法でリストを処理しなければならない。

ユーザーエージェントがimg要素が表すテキストを表示しようとする場合、次の手順を使用しなければならない。

  1. href属性を持たないareasにおけるすべてのarea要素を削除する。

  2. href属性で同じ値をもつおよび空でないalt属性も持つareasにおける別のareaの要素が存在する場合alt属性を持たないまたはそのalt属性の値が空文字列である、areasにおけるすべてのarea要素を削除する。

  3. areasにおける残りの各area要素は、ハイパーリンクを表す。このハイパーリンクは、すべてのimgのテキストに関連した方法でユーザーに利用できるようにすべきである。

    In this context, user agents may represent area and img elements with no specified alt attributes, or whose alt attributes are the empty string or some other non-visible text, in an implementation-defined fashion intended to indicate the lack of suitable author-provided text.

ユーザーエージェントが画像を表示することを意図し、かつハイパーリンクを選択する画像との相互作用を可能にする場合、その画像は、逆ツリー順で、areasarea要素から採取した、層状の形状のセットに関連付けられなければならない(よって、ツリー順に、mapにおける最後に指定されたarea要素が一番下の形状であり、かつmapにおける最初の要素が最上位の形状である)。

areasにおける各area要素は、画像の上に層状にする形状を得るために、次のように処理されなければならない:

  1. 要素のshape属性が表す状態を検索する。

  2. 存在する場合、要素のcoords属性を解析するために浮動小数点数のリストを解析するための規則を使用し、結果をcoordsリストにする。属性が存在しない場合、coordsリストを空のリストにする。

  3. If the number of items in the coords list is less than the minimum number given for the area element's current state, as per the following table, then the shape is empty; return.

    状態最小項目数
    Circle state3
    Default state0
    Polygon state6
    Rectangle state4
  4. shape属性の状態に対応する次のリストにおけるエントリーごとにcoordsリストにおける過剰項目をチェックする。

    Circle state
    3つを超えるリスト内の任意の項目を削除する。
    Default state
    リスト内のすべての項目を削除する。
    Polygon state
    項目の数が奇数である場合に最後の項目を削除する。
    Rectangle state
    4つを越えるリスト内の任意の項目を削除する。
  5. shape属性がrectangle stateを表し、かつリストの最初の数がリストの3番目の数よりも数値的に大きい場合、周りでこの2つの数値を交換する。

  6. shape属性がrectangle stateを表し、かつリストの2番目の数がリストの4番目の数よりも数値的に小さい場合、周りでこの2つの数値を交換する。

  7. If the shape attribute represents the circle state, and the third number in the list is less than or equal to zero, then the shape is empty; return.

  8. さて、要素によって表される形状は、shape属性の状態に対応する次のリストの項目について説明されるいずれかである。

    Circle state

    xcoordsにおける最初の数字にし、yを2番目に数字にし、rを3番目の数字にする。

    The shape is a circle whose center is x CSS pixels from the left edge of the image and y CSS pixels from the top edge of the image, and whose radius is r CSS pixels.

    Default state

    形状は、正確に画像全体を覆う長方形である。

    Polygon state

    xicoords(2i)番目のエントリーにし、yicoords(2i+1)番目のエントリーにする(インデックス0をもつ1つであるcoordsの最初のエントリ)。

    Let the coordinates be (xi, yi), interpreted in CSS pixels measured from the top left of the image, for all integer values of i from 0 to (N/2)-1, where N is the number of items in coords.

    形状は、頂点が奇偶規則を使用して確立された、頂点がthe coordinatesで与えられる多角形である。[GRAPHICS]

    Rectangle state

    x1coordsの最初の数、y1を2番目の数、x2を3番目の数、およびy2を4番目の数にする。

    The shape is a rectangle whose top-left corner is given by the coordinate (x1, y1) and whose bottom right corner is given by the coordinate (x2, y2), those coordinates being interpreted as CSS pixels from the top left corner of the image.

    For historical reasons, the coordinates must be interpreted relative to the displayed image after any stretching caused by the CSS 'width' and 'height' properties (or, for non-CSS browsers, the image element's width and height attributes — CSS browsers map those attributes to the aforementioned CSS properties).

    ブラウザーのズーム機能および変換は、座標に影響しないCSSまたはSVGを使用して適用される。

その点を覆う形状が存在しない場合、上記のアルゴリズムごとに積層形状のセットに関連する画像をもつポインティングデバイス作用は、ポインティングデバイスが指示した点、もしあれば、または画像要素自身を覆う最上位の形状に最初に発火される関連するユーザーとの対話イベントをもたらさなければならない。ユーザーエージェントはまた、(例えば、キーボードを使用して)ハイパーリンクを表す個々のarea要素を選択して活性化することを可能にすることができる。

Because a map element (and its area elements) can be associated with multiple img elements, it is possible for an area element to correspond to multiple focusable areas of the document.

イメージマップはライブである。DOMが突然変異される場合、ユーザーエージェントは、あたかもイメージマップに対するアルゴリズムを再実行したかのように動作しなければならない。