area 要素領域を指定する

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

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

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

さらに詳細な説明を見る

サンプルソースを見る

area 要素の仕様

カテゴリ
コンテンツモデル
この要素を使用できる文脈

フレージング・コンテンツが期待される場所。ただし map 要素内でのみ使用できます。

この要素で使用できる属性
DOM インタフェース
interface HTMLAreaElement : HTMLElement {
           attribute DOMString alt;
           attribute DOMString coords;
           attribute DOMString shape;
  stringifier attribute DOMString href;
           attribute DOMString target;

           attribute DOMString rel;
  readonly attribute DOMTokenList relList;
           attribute DOMString media;
           attribute DOMString hreflang;
           attribute DOMString type;

  // URL decomposition IDL attributes
           attribute DOMString protocol;
           attribute DOMString host;
           attribute DOMString hostname;
           attribute DOMString port;
           attribute DOMString pathname;
           attribute DOMString search;
           attribute DOMString hash;
};

詳細説明

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 要素の解説もあわせてご確認ください。

area 要素のサンプルソース

<!-- 地図画像を使用したクリッカブルマップの例 -->
<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>

W3C HTML5 仕様書

4.8.13 The area element