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

4.8.13 map要素

Element/map

Support in all current engines.

Firefox1+Safari1+Chrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome Android18+WebView Android1+Samsung Internet1.0+Opera AndroidYes
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
透過的
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
nameusemap属性から参照するイメージマップ
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLMapElementを使用する。

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

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

map . areas

maparea要素の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.14 area要素

Element/area

Support in all current engines.

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

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

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

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

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

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

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

状態キーワード
Circle statecircle
Default statedefault
Polygon statepoly
Rectangle staterect

属性は省略してもよい。欠損値のデフォルト不正値のデフォルト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属性が存在しない場合、targetdownloadpingrel、およびreferrerpolicy属性は省略しなければならない。

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

4.8.15 イメージマップ

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

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>