1. 4.8.12 map要素
      2. 4.8.13 area要素
      3. 4.8.14 イメージマップ

4.8.12 map要素

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?
カテゴリー：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
透過的。
text/htmlにおけるタグ省略：
どちらのタグも省略不可。
コンテンツ属性：
グローバル属性
name — usemap属性から参照するイメージマップの名前
アクセシビリティの考慮：
著者向け。
実装者向け。
DOMインターフェイス：
HTMLMapElementを使用する。

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

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

map.areas

mapのarea要素のHTMLCollectionを返す。

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

<!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 area要素

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

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

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

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

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

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

shape属性は、次のキーワードと状態を持つ列挙属性である：

キーワード状態
circleCircle state
defaultDefault state
polyPolygon state
rectRectangle state

この属性の欠損値のデフォルトと不正値のデフォルトは、両方とも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ピクセルで、矩形の左側から画像の左辺までの距離、上側から上辺までの距離、左側から左辺までの距離、下側から上辺までの距離を表さなければならない。

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

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

4.8.14 イメージマップ

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

img要素の形式において、画像は、img要素上で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>