★HTML Living Standard リファレンス

<area> …… イメージマップ上のリンクエリアを表す

<area>タグは、イメージマップ上のリンクエリアを表す際に使用します。

イメージマップとは、座標で領域を指定して画像内に幾何学形のリンクエリアを設定することです。
イメージマップを使用すると、一枚の画像内に複数のハイパーリンクエリアやデッドリンクエリアを設定できます。

イメージマップは、img要素、map要素、area要素を組み合わせて作成します。
area要素は、通常はmap要素の子孫要素として配置します。
area要素のhref属性で、ハイパーリンク先を指定します。
area要素のshape属性とcoords属性で、幾何学形の種類とその座標を指定します。

リンクエリアの形状

リンクエリアの形状の種類は、area要素のshape属性で指定します。
shape属性の値に指定できるキーワードは、rect（長方形）、circle（円形）、poly（多角形）、default（画像全体）のいずれかです。
shape属性の指定を省略した場合には、rectを指定したのと同じ状態になります。

shape=”rect”（長方形）

レクタングル状態では、area要素のcoords属性値に4つの整数を指定します。
4つの整数はそれぞれ、
画像の左端から長方形の左側までの距離、
上端から上辺までの距離、
左端から右側までの距離、
上端から下端までの距離
をCSSピクセル単位で表します。
整数の数は4つですから、指定される座標は2つです。
長方形を確定させるには、左上と右下の2座標が決まればよいというわけです。
1番目の整数は3番目の整数より小さく、
2番目の整数は4番目の整数より小さい必要があります。

shape=”circle”（円形）

サークル状態では、area要素には3つの整数を含むcoords属性が存在し、3つ目は正の整数でなければなりません。
1番目の整数は画像の左端から円の中心までの距離（CSSピクセル単位）、
2番目の整数は画像の上端から円の中心までの距離（CSSピクセル単位）、
3番目の整数は円の半径（CSSピクセル単位）となります。

shape=”poly”（多角形）

ポリゴン状態では、area要素のcoords属性値に6つ以上の整数を指定します。
整数の数は偶数で各ペアごとにひとつの座標を表します。
各ペアに指定する数値は、画像の左端からの距離と画像の上端からの距離をCSSピクセル単位で表します。
各ペアで表される座標を記述順に結んでいくと多角形の形状となります。
（例：整数6つなら座標3つの三角形となります。）

shape=”default”（画像全体）

デフォルト状態では、area要素には coords属性があってはなりません。
この場合のエリアは、画像全体となります。

area要素の終了タグについて

HTMLの仕様では、area要素には終了タグ</area>はありません。

■使用例

以下のサンプルは、img要素、map要素、area要素を使用してイメージマップを作成しています。
img要素のusemap属性の値とmap要素のname属性の値を同じイメージマップ名にすることで、画像とイメージマップを関連付けています。

area要素のhref属性で、ハイパーリンク先を指定しています。
shape属性の指定を省略しているので、rect（長方形）を指定したのと同じ状態になります。
coords属性に指定した4つの整数で、長方形の左上と右下の2座標を指定しています。

<header>
 <img src="https://www.htmq.com/wp-content/uploads/2024/08/map_navigation.png" alt="メニュー" usemap="#navigation">
</header>
 ...
<footer>
 <map name="navigation">
  <p>
   <a href="/clothes/">衣料品</a>
   <area alt="衣料品" coords="0,0,151,111" href="/clothes/"> |
   <a href="/toys/">おもちゃ</a>
   <area alt="おもちゃ" coords="150,0,300,111" href="/toys/"> |
   <a href="/food/">食品</a>
   <area alt="食品" coords="0,0,151,222" href="/food/"> |
   <a href="/books/">本</a>
   <area alt="本" coords="150,0,300,222" href="/books/">
  </p>
 </map>
</footer>

<p>
 <img src="./sample/sample-usemap.png" usemap="#shapes"
  alt="中空の赤い四角形、緑の円、青い三角形、黄色い四芒星">
 <map name="shapes">
  <area shape="rect" coords="50,50,100,100">  <!-- 中空部分：href属性が存在しない点に注意 -->
  <area shape="rect" coords="25,25,125,125" href="red " alt="赤い四角形">
  <area shape="circle" coords="200,75,50" href="green " alt="緑の円">
  <area shape="poly" coords="325,25,262,125,388,125" href="blue " alt="青い三角形">
  <area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
  href="yellow " alt="黄色い四芒星">
 </map>
</p>

<p>
 <img src="./sample/sample-usemap.png" usemap="#shapes"
  alt="中空の赤い四角形、緑の円、青い三角形、黄色い四芒星">
</p>

山田 太郎

テック・リード

山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。

全ての投稿者 山田 太郎