このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

area要素:イメージマップの領域を指定

記事Jun. 23rd,2015
July 7th,2020
クライアントサイドイメージマップにおける領域を指定する要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

カテゴリー フロー・コンテンツフレージング・コンテンツ
利用場所 フレージング・コンテンツが置ける場所(ただし、祖先要素にmap”要素またはtemplate”要素を持たなければならない)
内容
タグの省略 終了タグはありません

area”要素はmap”要素によって定義されるクライアントサイドイメージマップの領域を指定する要素です。

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample1">

<map name="sample1">
<area href="sample1.html" shape="rect" coords="8,32,72,99" alt="長方形">
<area href="sample2.html" shape="poly" coords="97,103,30,193,163,193" alt="多角形">
<area href="sample3.html" shape="circle" coords="146,59,47" alt="円形">
</map>
イメージマップのサンプル 長方形 多角形 円形

属性と値

現行の仕様で定義されている属性

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
alt="" 代替テキスト テキスト イメージマップが表示できない場合のリンクテキスト
coords="" 領域の座標 左上の角のX座標,左上の角のY座標,右下の角のX座標,右下の角のY座標 shape”属性の値が“rect”の場合】左上の角の座標と右下の角の座標
中心点のX座標,中心点のY座標,半径 shape”属性の値が“circle”の場合】中心点の座標と半径
X座標,Y座標,X座標,Y座標,... shape”属性の値が“poly”の場合】すべての角の座標を順番に
shape="" 領域の形状 rect 長方形
circle 円形
poly 多角形
default 画像全体
href="" リンク先の指定 URL リンク先のURL
#ID名 リンクの到達点となる要素のid”属性の値
mailto:メールアドレス メールの送信先
tel:電話番号 発信する電話番号
target="" リンク先の表示方法 _blank 新しいブラウジング・コンテキストに表示
_self 現在のブラウジング・コンテキストに表示
_parent 現在のブラウジング・コンテキストの1つ上位のブラウジング・コンテキストに表示
_top 現在のブラウジング・コンテキストの最上位のブラウジング・コンテキストに表示
ブラウジング・コンテキスト名 任意のブラウジング・コンテキストに表示
download=""HTML5で追加 ダウンロードさせるかどうか、ダウンロード時のファイル名 ファイル名 ダウンロード時のファイル名
ping=""HTML Living Standardで定義 pingの送信先 URL pingの送信先
rel=""HTML5で追加 現在のページから見たリンク先との関係 リンクタイプ 現在のページから見たリンク先との関係
referrerpolicy=""HTML5.2で追加 リファラーポリシーを指定 リファラーポリシー リファラーポリシー

alt”属性href”属性を指定する場合は必須です。

href”属性を指定しない場合はtarget”属性download”属性ping”属性rel”属性referrerpolicy”属性は指定できません。

過去に定義された属性

属性
属性 説明 説明
hreflang=""注意 リンク先の記述言語 言語コード リンク先が記述されている言語
nohref=""注意 リンクしない nohref リンクしない
type=""注意 リンク先のMIMEタイプ MIMEタイプ リンク先のMIMEタイプ
tabindex="" フォーカスの可否とフォーカスの移動順序を指定する 正の整数 順次ナビゲーションに加わり、フォーカスの順番を指定(tabindex”属性の値が小さい順番にフォーカスする)
0 順次ナビゲーションに加わるがフォーカスの順番は指定しない(文書内に記述された順番でフォーカスする)
負の整数 フォーカス可能だが順次ナビゲーションには加わらない
accesskey="" 要素にアクセスキーを割り当てる 文字 ユニコード1文字によるアクセスキー
onfocus="" フォーカスされた時に実行されるスクリプト スクリプト フォーカスされた時に実行されるスクリプト
onblur="" フォーカスを失った時に実行されるスクリプト スクリプト フォーカスを失った時に実行されるスクリプト

仕様書

area”要素はHTML3.2から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<area>
定義あり

定義あり

定義あり

定義あり

定義あり
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
alt=""
定義あり

定義あり

定義あり

定義あり

定義あり
coords=""
定義あり

定義あり

定義あり

定義あり

定義あり
shape=""
定義なし

定義あり

定義あり

定義あり

定義あり
href=""
定義なし

定義なし

定義なし

定義あり

定義あり
target=""
定義あり

定義あり

定義あり

定義あり

定義あり
download=""
定義あり

定義あり

定義あり

定義あり

定義あり
ping=""
定義なし

定義なし

定義なし

定義なし

定義あり
rel=""
定義なし

定義あり

定義あり

定義あり

定義あり
referrerpolicy=""
定義なし

定義なし

定義なし

定義あり

定義あり
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
hreflang=""
定義なし

定義あり

定義あり

定義あり

削除
nohref=""
定義あり

削除

削除

削除

削除
type=""
定義なし

定義あり

定義あり

定義あり

削除
tabindex=""
定義あり

グローバル属性

グローバル属性

グローバル属性

グローバル属性
accesskey=""
定義あり

グローバル属性

グローバル属性

グローバル属性

グローバル属性
onfocus=""
定義あり

グローバル属性

グローバル属性

グローバル属性

グローバル属性
onblur=""
定義あり

グローバル属性

グローバル属性

グローバル属性

グローバル属性
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク