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

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

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

要素について

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

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

通常、“area”要素に適用されたCSSのスタイルはその“area”要素が表すイメージマップの領域には反映されません。ただし、cursor”プロパティによるカーソルの指定は反映されます。

サンプルコード

<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>
定義あり

定義あり

定義あり

定義あり

定義あり
DOMインターフェース
[Exposed=Window]
interface HTMLAreaElement : HTMLElement {
[HTMLConstructor] constructor();

[CEReactions] attribute DOMString alt;
[CEReactions] attribute DOMString coords;
[CEReactions] attribute DOMString shape;
[CEReactions] attribute DOMString target;
[CEReactions] attribute DOMString download;
[CEReactions] attribute USVString ping;
[CEReactions] attribute DOMString rel;
[SameObject, PutForwards=value] readonly attribute DOMTokenList relList;
[CEReactions] attribute DOMString referrerPolicy;

// also has obsolete members
};
HTMLAreaElement includes HTMLHyperlinkElementUtils;
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);

area {
display: none;
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク