<area>イメージマップの領域を定義する

<area>タグは、イメージマップのリンク領域を設定するために使用し、map要素内に配置して使います。

href属性でハイパーリンク先のページurlを指定します。 この時併せてalt属性でハイパーリンクのテキストを指定する必要があります。

href属性を指定しない場合、area要素はハイパーリンクの無効領域を表します。 例えば、他のarea要素で指定したリンク領域に対して、指定範囲から外すなどの効果があります。 href属性を指定しない場合は、alt属性も省略する必要があります。

またalt属性では、area要素で指定した領域がどのようなエリアなのかをテキストで説明します。 これはimg要素のalt属性と同様で、その画像を見る事ができないユーザーを想定し、そのエリアについて説明します。

リンク領域の形状は、shape属性で指定します。 値はrect(長方形)、circle(円)、poly(多角形)、defaultの4種類から指定します。 shape属性を省略した場合は「rect」を指定した場合と同様となります。

  • circle …… 円形
  • circ(非準拠) …… 円形
  • poly …… 多角形
  • polygon(非準拠) …… 多角形
  • rect …… 四角形
  • rectangle(非準拠) …… 四角形
  • default …… 標準(画像全体がリンク領域)

shape属性で指定したリンク領域の形状は、coords属性でその図形の形を表すための座標をさらに指定します。 また座標の指定方法は、shape属性で指定した値に応じて設定方法が異なります。

詳しくは下記の属性を参照下さい。

HTML5での変更点

HTML5のarea要素では、type属性、rel属性、hreflang属性、download属性が追加されています。 またnohref属性が廃止されました。

HTML5.1の場合は、alt属性を空で指定できなくなりました。

書式

  • <area 属性="値"> ……… イメージマップのリンク領域を指定

属性

alt="" ハイパーリンクの代替テキスト
shape="" リンク領域の形状を指定
  • circle …… 円形
  • circ(非準拠) …… 円形
  • poly …… 多角形
  • polygon(非準拠) …… 多角形
  • rect …… 四角形
  • rectangle(非準拠) …… 四角形
  • default …… 標準(画像全体がリンク領域)
coords="" リンク領域の座標を指定。詳しくは下記参照。
href="" ハイパーリンク先のurlを指定
target="" ハイパーリンク先を開く際のターゲットを指定
  • _blank …… 新しいウィンドウで表示
  • _self …… 現在のウィンドウに表示
  • _parent …… 親ウィンドウに表示
  • _top …… 分割を解除し、全体に表示
  • ウィンドウ、フレーム名 …… 任意のウィンドウ、フレームに表示
rel="" ハイパーリンク先との関係を指定
hreflang="" ハイパーリンク先の言語を指定
type="" ハイパーリンク先のMIMEタイプを指定
download="" ダウンロード先のファイル名を指定

coords属性について

coords属性では図形の形を表すための座標を指定しますが、shape属性で指定した値によって指定方法が変わるため、値ごとに分けて解説します。

また基本的には、画像の左上のピクセルを基準点とし、そこからリンク領域(図形)までの座標を数値で指定します。 この際、カンマ(,)で区切り数値を指定します。

circleの場合

circleの場合の指定方法

shape属性でcircle(円形)を指定した場合は、上記の図のa,b,cの3つの値をカンマ(,)で区切って指定します。 それぞれ画像の左上を基準点として、円の中心までの横幅(a)、高さ(b)をピクセル数で指定します。 最後にその円の中心点からの半径(C)を指定する事で、円形を作る事ができます。

polyの場合

polyの場合の指定方法

shape属性でpoly(多角形)を指定した場合は、coords属性の値に最低6つ以上の整数値を指定する必要があります。 値は二つで1組で、それぞれ画像の左上を基準点とし、多角形の端点を横幅、高さの順番に指定します。

例えば上記の例でいえば、画像の左上から多角形の一番上の端点までの横幅がa、高さがbとなります。 一番右側の端点までの横幅がC、高さがdとなり、一番下の端点までの横幅がe、高さがfとなっています。

またpolyは多角形であれば、三角形以外でも指定可能です。 ですが、座標指定には画像の左上からの横の距離、縦の距離というように必ず2つの数値が必要です。 ですので必ず偶数個になっていなければなりません。

rectの場合

rectの場合の指定方法

rect(四角形)を指定した場合は、上記の図のようにa,b,c,dの4つの整数値を指定します。 これも他の図形と同様に、画像の左上を基準として横幅(a)、高さ(b)を指定し、四角形の左上の座標を設定します。 続いて四角形の右下の座標を同じように指定します。 同じように画像の左上を基準点として、四角形の右下までの横幅(c)、高さ(d)を指定し、四角形を作成します。

defaultの場合

defaultを指定した場合は、coords属性を指定することはできません。 この場合は画像全体がリンク領域となります。

座標の割り出し方

座標の割り出し方

各図形の座標を割り出す場合、windowsであれば「ペイント」を使用すると調べる事ができます。 上記の場合なら、カーソルを合わせた部分が左下に座標として表示されます。 このとき「横,縦」の順番に表示されるので、それを参考にして下さい。

使用した時の例

<img src="/map.jpg" width="690" height="150" usemap="#mapname" alt="イメージマップ表示例">
<map name="mapname">
<area shape="rect" coords="40,34,170,106" href="/hp-web/" alt="四角形">
<area shape="circle" coords="340,67,51" href="/hp-web/html-taglist/" alt="円形">
<area shape="poly" coords="534,29,635,71,526,108" href="https://www.yuu-diaryblog.com/" alt="三角形">
</map>

ブラウザ上の表示例

イメージマップ表示例 四角形 円形 三角形

対応ブラウザなどのデータ

形式 <area shape=""> カテゴリ フローコンテンツ, フレージングコンテンツ
親要素 フレージングコンテンツが期待される場所 子要素 なし
開始タグ 必須 終了タグ なし
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~