<area>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ
利用場所 map要素またはtemplate要素内で、フレージング・コンテンツが置ける場所
内容 空

area要素は、イメージマップのリンク領域を設定します。通常、この要素はmap要素内で使用します。


<map name="example">

<area shape="rect" coords="50,50,150,150" href="map1.html" alt="四角">
<area shape="circle" coords="250,100,50" href="map2.html" alt="丸">
<area shape="poly" coords="400,50,450,150,350,150" href="map3.html" alt="三角">
<area shape="default" href="map4.html" alt="その他の領域">

</map>
属性 値
任意属性
shape="" 領域の形状 rect 四角形 （初期値）
circle 円形
poly 多角形
default 画像全体
coords="" 領域の座標 座標（x,y）等
  • rectの場合： 左上と右下の角の座標（x,y,x,y）
  • circleの場合： 中心点の座標と半径（x,y,半径）
  • polyの場合： すべての角の座標（x,y,x,y,x,y ...）
  • defaultの場合： coords属性は指定できない
href="" リンク先の指定 URL リンク先のURL
alt="" 代替テキスト テキスト マップが表示できない場合のリンクテキスト
hreflang="" ［＋］リンク先の記述言語（HTML 5.1では廃止） 言語コード ja、en、zh、等
type="" ［＋］リンク先のMIMEタイプ（HTML 5.1では廃止） MIMEタイプ
rel="" ［＋］現在の文書から見たリンク先の関係 リンクタイプ 半角スペース区切りで複数指定可能
download="" ［＋］ダウンロード用のリンクを指定 ファイル名 デフォルトのファイル名を指定
target="" リンク先の表示方法 _blank 新規のウィンドウに表示
_self 現在のウィンドウ（フレーム）に表示
_parent 親ウィンドウ（フレーム）に表示
_top フレームを解除してウィンドウ全体に表示
ウィンドウ名、フレーム名 任意のウィンドウ（フレーム）に表示
  • area要素の状態によっては、一部の属性が必須になる場合があります。また、一部の属性が指定できないケースも存在します。（詳細は以下で）

download属性については、下記のページを参考にしてください。

href属性とalt属性について

href属性はリンク先のURLを、alt属性はマップが表示できない場合のリンクテキストを指定します。

この2つの属性の関係は次のようになります。

area要素にhref属性がある場合

このarea要素は、リンクが設定されている領域を表します。この場合はalt属性が必須となります。

<area shape="rect" coords="150,0,299,30" href="example.html" alt="リンクテキスト">

ただし、同じマップ内において同一のリンク先が指定された別のarea要素があり、そこに空でないalt属性が指定されている場合には、alt属性の値を省略することができます。（HTML 5.1では省略できなくなりました）

<area shape="rect" coords="150,0,299,30" href="example1.html" alt="リンクテキスト">
<area shape="rect" coords="300,0,449,30" href="example1.html" alt="">

HTML 5.1の場合は、値を省略せずに次のように記述する必要があります。

<area shape="rect" coords="150,0,299,30" href="example1.html" alt="リンクテキスト">
<area shape="rect" coords="300,0,449,30" href="example1.html" alt="リンクテキスト">
area要素にhref属性がない場合

このarea要素は、リンクが設定されていない領域を表します。この場合はalt属性を指定することはできません。

<area shape="rect" coords="150,0,299,30">
  • また、この場合はhreflang属性、type属性、rel属性、download属性、target属性も指定できません。

領域の形状について

領域の形状は、shape属性で指定します。指定できる値は次の4つです。

rect 四角形 （初期値）
四角形（正方形・長方形）の領域を作成します。shape属性を省略した場合は、この値が使用されます。
circle 円形
正円の領域を作成します。（楕円は不可）
poly 多角形
任意の角数を持つ多角形の領域を作成します。（三角形以上）
default 画像全体
画像全体を領域とします。
  • default が指定されたarea要素は、他のarea要素よりも後に配置する必要があります。（領域が重なっている場合は、先に指定した領域が優先されるので）
  • rect、circle、poly を指定している場合は、coords属性が必須となります。

座標の指定方法

領域の座標は、coords属性で指定します。

500×200pxの画像内に、四角、丸、三角の図形が並んでいます。画像全体の座標は、左上が0,0、右上が0,500、左下が0,200、右下が500,200となります。左上を基点に、右方向にx、下方向にyです。

領域の形状により、座標の指定方法が異なります。例えば、上記の画像を使用した場合は、各領域の指定内容は次のようになります。（座標の数値（ピクセル数）をカンマ（ , ）で区切って記述していきます）

rect（四角形）の場合
左上の角と右下の角の座標を指定 （x,y,x,y）
coords="50,50,150,150"
circle（円形）の場合
中心点の座標と半径を指定 （x,y,半径）
coords="250,100,50"
poly（多角形）の場合
すべての角の座標を指定 （x,y,x,y,x,y ...）
coords="400,50,450,150,350,150"
  • default（画像全体）の場合は、coords属性は指定できません。

座標の割り出し方

画像編集ソフトがあれば、座標を簡単に割り出すことができます。Windowsの場合は、付属しているペイントでも座標を調べることが可能です。

  • ペイントの場合： 調べたい位置にカーソルを合わせると、右下（または左下）に座標が表示されます。
HTML5における変更点
  • hreflang属性、type属性、rel属性、download属性が追加されました。
  • nohref属性が廃止されました。
  • alt属性が必須ではなくなりました。（条件付き）
HTML 5.1における変更点
  • hreflang属性とtype属性が廃止されました。（こちらには削除されたと書かれていますが、area要素の説明にはこの2つの属性が残されたままです（2016年12月現在）。でもたぶん廃止されたのだと思います。）
  • 空のalt属性を指定できなくなりました。

使用例

画像全体と各図形にリンクを設定した例

<p><img src="map.gif" alt="サンプル" usemap="#example1" width="500" height="200"></p>

<map name="example1">

<area shape="rect" coords="50,50,150,150" href="map1.html" alt="四角">
<area shape="circle" coords="250,100,50" href="map2.html" alt="丸">
<area shape="poly" coords="400,50,450,150,350,150" href="map3.html" alt="三角">
<area shape="default" href="map4.html" alt="その他の領域">

</map>
表示例

サンプル

四角 丸 三角 その他の領域
  • 一部のブラウザでは、shape="default" の指定に対応していないようです。
画像全体にリンクを設定し、図形の部分はリンクを設定しない例

<p><img src="map.gif" alt="サンプル" usemap="#example2" width="500" height="200"></p>

<map name="example2">

<area shape="rect" coords="50,50,150,150">
<area shape="circle" coords="250,100,50">
<area shape="poly" coords="400,50,450,150,350,150">
<area shape="default" href="map4.html" alt="その他の領域">

</map>
表示例

サンプル

その他の領域
  • 一部のブラウザでは、shape="default" の指定に対応していないようです。
target属性を指定した例
  • 四角の図形にのみリンクを設定しています。（リンク先が新規ウィンドウで表示されます）

<p><img src="map.gif" alt="サンプル" usemap="#example3" width="500" height="200"></p>

<map name="example3">

<area shape="rect" coords="50,50,150,150" href="map5.html" alt="四角" target="_blank">

</map>
表示例

サンプル

四角
download属性を指定した例
  • 四角の図形にのみ、ダウンロード用のリンクを設定しています。
  • 対応しているブラウザでは、実際にダウンロードされるのでご注意ください。未対応のブラウザではTAG indexのバナーが画面上に表示されます。

<p><img src="map.gif" alt="サンプル" usemap="#example4" width="500" height="200"></p>

<map name="example4">

<area shape="rect" coords="50,50,150,150" href="../../image/design/tagindex_mini.gif" alt="TAG indexのバナー" download="TAGindex.gif">

</map>
表示例

サンプル

TAG indexのバナー