Jun. 23rd,2015
＃
要素について
| カテゴリー | フロー・コンテンツ、フレージング・コンテンツ |
| 利用場所 | フレージング・コンテンツが置ける場所(ただし、祖先要素に“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="" |
ダウンロードさせるかどうか、ダウンロード時のファイル名 | ファイル名 | ダウンロード時のファイル名 |
ping="" |
pingの送信先 | URL | pingの送信先 |
| rel="" |
現在のページから見たリンク先との関係 | リンクタイプ | 現在のページから見たリンク先との関係 |
referrerpolicy="" |
リファラーポリシーを指定 | リファラーポリシー | リファラーポリシー |
“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でも定義されています。
定義されている仕様書
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
| <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;
}
