<AREA>イメージマップのリンク領域を設定する

<AREA>タグでは、<MAP>で設定したイメージマップのリンク領域の設定などができます。

イメージマップとは、画像の特定の領域がリンクになっているものの事で、<MAP>はその内容がイメージマップであることを定義します。 そしてその定義部分に名前をつけ、IMG要素のusemap属性に<MAP>のname属性で指定した名前を指定することで、画像とイメージマップを関連付ける事ができます。

<AREA>ではそのイメージマップ(<MAP>内)で、クリックに反応する領域とそのリンク先の指定をします。 同時にリンク先を示す代替テキストを必ず指定するようにしましょう。

また<AREA>のcoords属性で指定するリンク範囲の座標の指定方法は、shape属性で指定する領域の形によって異なります。 座標の指定方法は、いずれもピクセルで指定し、各座標をカンマ(,)で区切ります。

rectの場合が、左上のa座標(横方向),左上のb座標(縦方向),右下のc座標(横方向),右下のd座標(縦方向)。 circleの場合が、中心のa座標(左端から中心の距離),中心のb座標(上から中心の距離),半径c(半径の長さ)。 polyの場合は、すべての角の座標を「横方向,縦方向」の順で指定し、最後は最初の座標と同じ値を指定し、多角形を閉じます。

なおその領域にリンクがない場合は、href属性の代わりにnohref属性を指定しましょう(xhtmlの場合はnohref="nohref")。 またHTML4.01ではalt属性を必ず指定することになっています。 ですので<AREA>と<IMG>の両方にalt属性を記述するようにしましょう。

使用した時の例

<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="無料HP作成へ">
<area shape="circle" coords="342,64,51" href="/html-taglist/" alt="html">
<area shape="poly" coords="532,28,639,70,536,108,532,28" href="index.html" alt="top">
</map>

ブラウザ上の表示例

イメージマップ表示例 無料HP作成へ htmlタグリファレンス 安月給さよならへ

※各図形にカーソルを合わせるとリンク領域の確認ができます。

書式

  • <img src="画像url" usemap="#名前" alt="代替テキスト"> ・・・・・・ 利用する画像
  • <map name="名前">~</map> ・・・・・・ 画像をイメージマップとして定義
  • <area shape="形状" coords="座標" href="url" alt="代替テキスト"> ・・・・・・ リンク領域など

属性

shape="" 画面上でマップとして定義される形(リンク領域の形)の指定
  • default・・・全体
  • circ・・・円形
  • circle・・・円
  • rect・・・四角形
  • poly・・・多角形
  • polygon・・・多角形
  • rectangle・・・短形
coords="" リンク領域の座標の指定。shape属性で定義した形によって異なる
  • rect・・・左上のx,左上のy,右下のx,右下のy
  • circle・・・中心のx,中心のy,半径
  • poly・・・すべての角の座標を「x,y」の順で指定。最後に最初の座標と同じ値を指定

※xは横方向の座標、yは縦方向の座標

href="" リンク先urlの指定
alt="" 代替テキストの指定

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

形式 <area shape="" coords="" href="" alt=""> カテゴリ フローコンテンツ / フレージングコンテンツ
親要素 子要素にフレージングコンテンツを含める要素 子要素 なし
開始タグ 必須 終了タグ なし
分類 インライン要素
属性 target / download / hreflang / type / rel / rev / media / methods / name / nohref
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

nohref属性は、HTML5では廃止。hreflang、media、rel、typeの各属性が追加された