<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では廃止 言語コード jaenzh、等
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要素よりも後に配置する必要があります。(領域が重なっている場合は、先に指定した領域が優先されるので)
  • rectcirclepoly を指定している場合は、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のバナー