area 要素

area 要素は、クライアントサイド クリッカブルマップにおける領域を指定します。

area 要素が href 属性を持つ場合、その area 要素はハイパーリンクとなります。この場合、alt 属性は必須となり、href 属性で関連づけられた URI に関する代替テキストを指定します。ただし、同一の map 要素内に、同じ URI が指定された href 要素をもつ別の area 要素が存在し、そこにすでに適切な alt 属性が指定されている場合は、省略することもできます。

area 要素が href 属性を持たない場合は、この要素で指定された領域はクリック出来ない領域となります。また、href 属性を持たない area 要素に対して、alt 属性を付与することはできません。また、target、rel、media、hreflang、type 属性も省略しなければなりません。

area 要素では、「領域の形状」 と 「領域の座標」 を指定することで、クリッカブル領域を指定します。形状を shape 属性、座標を coords 属性でそれぞれ指定します。

領域の形状を指定する

shape 属性によって、領域の形状を指定することができます。指定できる値は下記の通りです。指定が省略された場合は、「rect」 として扱われます。

属性値	形状
circle	円形
default	画像全体
poly	多角形
rect （初期値）	長方形

また、shape 属性の値によって、coords 属性が持つべき値の数が決まります。

shape 属性値	coords 属性に指定する値の数
circle	3つの整数
default	coords 属性を指定してはいけません
poly	6つ以上の偶数個の整数
rect	4つの整数

coords 属性値の具体的な指定方法

座標は、1つの点につき、X軸、Y軸の座標のセットによって表されます。座標の基点は画像の左上隅になりますので、例えば、画像の左上隅を 0,0 として、左上隅から 100px 四方の四角形の領域を指定する場合、領域右下隅の座標は、100,100 となります。

これを、実際に指定すると下記のようになります。

coords="0,0,100,100"

多角形の場合、例えば三角形なら、最低 3つの座標がわかれば指定可能です。座標は X/Y 軸の組み合わせになるため、6つ以上、偶数の値となります。

[頂点 1 の X座標] , [頂点 1 の Y座標] , [頂点 2 の X座標] , [頂点 3 の X座標] , [頂点 3 の X座標] , [頂点 3 の X座標]

五角形の場合は、5つの頂点の座標を指定しますので、値は全部で 10個になります。このように必ず偶数になるはずです。

円形の場合は、中心の座標を指定した上で、半径を指定することで領域を指定しますので、下記のような指定になります。

[中心点の X座標] , [中心点の Y座標] , [半径]

具体的なソースコードは下記のサンプルソースをご確認ください。また、map 要素の解説もあわせてご確認ください。

<!-- 地図画像を使用したクリッカブルマップの例 -->
<figure>
 <figcaption>エリア選択マップ</figcaption>
 <img src="map.png" usemap="#map" alt="関東 6県の地図。県を選択するとそのエリアの店舗一覧に移動します。埼玉県は現在営業所がありません。" />
 <map name="map">
  <area shape="rect" coords="50,50,100,100" />
  <area shape="rect" coords="50,100,100,200" href="tokyo.html" alt="東京都" />
  <area shape="rect" coords="0,100,50,200" href="kanagawa.html" alt="神奈川県" />
  …省略…
 </map>
</figure>

IE11	○
Edge（EdgeHTML）	○
Edge（Chromium）	○
Chrome	○
Firefox	○
Safari	○
iOS Safari	○
Android Chrome	○