1. 4.8.13 map要素
      2. 4.8.14 area要素
      3. 4.8.15 イメージマップ
        1. 4.8.15.1 Authoring
        2. 4.8.15.2 Processing model

4.8.13 map要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
透過的
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
nameusemap属性から参照するイメージマップ
DOMインターフェイス
[Exposed=Window,
 HTMLConstructor]
interface HTMLMapElement : HTMLElement {
  [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.14 area要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所、ただし先祖map要素が存在する場合のみに限る。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
alt — 画像が利用不可である場合に使用する置換テキスト
coordsイメージマップ内に作成する図形の座標
shapeイメージマップ内に作成する図形の種類
hrefハイパーリンクのアドレス
targetハイパーリンクナビゲーションに対するブラウジングコンテキスト
download — リソースをナビゲートする代わりにダウンロードし、その場合リソースのファイル名にするかどうか
pingURLへのping
relハイパーリンクを含む文書における位置と宛先のリソースの関係
referrerpolicy — 要素によって開始されたフェッチのためのリファラポリシー
DOMインターフェイス
[Exposed=Window,
 HTMLConstructor]
interface HTMLAreaElement : HTMLElement {
  [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;
};
HTMLAreaElement implements HTMLHyperlinkElementUtils;

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

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

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

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

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

shape属性は、列挙属性である。以下の表は、この属性に対して定義されたキーワードを列挙する。キーワードとともにその行の最初のセルに与えられた状態は、これらキーワードが対応する状態を与える。最後の列に記載されているように、キーワードの一部は非適合である。

状態 キーワード
Circle state circle
circ 非適合
Default state default
Polygon state poly
polygon 非適合
Rectangle state rect
rectangle 非適合

属性は省略してもよい。欠損値のデフォルトは、rectangle状態である。

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

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

default state状態において、area要素はcoords属性を持ってはならない。(領域は全体の画像である。)

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

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

次のセクションで説明するように、ユーザーエージェントがarea要素を使用して作成されるハイパーリンクを辿るまたはハイパーリンクをダウンロードすることをユーザーに可能にする場合、hreftargetdownloadおよびping属性は、リンクが辿られる方法を決定する。rel属性は、ユーザーがリンクを辿る前に対象のリソースの見込みのある性質をユーザーに表すために使用されてもよい。

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

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

The activation behavior of area elements is to follow the hyperlink or download the hyperlink created by the area element, if any, and as determined by the download attribute and any expressed user preference.

IDL属性altcoordstargetdownloadping、およびrel、は、同じ名前のそれぞれのコンテンツ属性を反映しなければならない。

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

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

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

4.8.15 イメージマップ

4.8.15.1 Authoring

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

img要素や画像を表すobject要素の形式において、画像は、imgobject要素上でusemap属性を指定することにより(map要素の形式で)イメージマップに関連付けてもよい。usemap属性が指定される場合、map要素に妥当なハッシュ名の参照でなければならない。

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

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.15.2 Processing model

画像を表すimg要素またはobject要素がusemap属性を指定する場合、ユーザーエージェントは次のように要素を処理しなければならない:

  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. それがnullを返した場合、この手順を中止する。画像は、結局のところイメージマップに関連付けられない。

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

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

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

画像をサポートしない、または画像を無効するユーザーエージェントにおいて、object要素は画像を表現できず、したがってこのセクションは適用されない(フォールバックコンテンツが代わりに表示される)。したがって次の手順は、img要素にのみ適用される。

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

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

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

    このコンテキストにおいて、ユーザーエージェントは、適切な著者提供テキストの欠如を示すことを意図したユーザーエージェント定義の方法で、指定されたalt属性をもたない、またはalt属性が空文字列または一部の他の非表示テキストであるareaおよびimg要素を表してもよい。

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

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

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

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

  3. coordsリストにおける項目の数が、次の表の通り、area要素の現在の状態で指定される最小数よりも小さい場合、形状は空である。この手順を中止する。

    状態 最小項目数
    Circle state 3
    Default state 0
    Polygon state 6
    Rectangle state 4
  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. shape属性がcircle stateを示し、リストの3番目の数が0以下である場合、形状が空であり、この手順を中止する。

  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要素を選択して活性化することを可能にすることができる。

map要素(およびそのarea要素)は複数のimgobject要素に関連付けることができるので、area要素は文書の複数のフォーカス可能領域に対応することが可能である。

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