<area>【イメージマップ領域 (Hyperlink or dead area on an image map)】

目次: 概要 構文 DOMインタフェース

概要

メモ

<p id="areaR">赤エリア (赤色部分クリックでここにジャンプ)</p>
<p id="areaG">緑エリア (緑色部分クリックでここにジャンプ)</p>
<p id="areaB">青エリア (青色部分クリックでここにジャンプ)</p>
<p id="areaEtc">その他エリア (その他部分クリックでここにジャンプ)</p>
<img src="media/map.png" alt="画像" usemap="#map1" style="width:120px; height:120px; border:1px black solid">
<map name="map1">
  <!--手前から指定-->
  <area href="#areaB" alt="青エリア" title="青エリア" shape="rect" coords="60, 60, 100, 100">
  <area href="#areaG" alt="緑エリア" title="緑エリア" shape="rect" coords="40, 40, 80, 80">
  <area href="#areaR" alt="赤エリア" title="赤エリア" shape="rect" coords="20, 20, 60, 60">
  <area href="#areaEtc" alt="その他エリア" title="その他エリア" shape="default">
</map>

赤エリア (赤色部分クリックでここにジャンプ)

緑エリア (緑色部分クリックでここにジャンプ)

青エリア (青色部分クリックでここにジャンプ)

その他エリア (その他部分クリックでここにジャンプ)

画像 青エリア緑エリア赤エリアその他エリア

関連要素

外部リンク

構文

<area必須開始タグ
alt=【代替テキスト】代替テキスト (href属性指定の場合、必須)
coords=【カンマ区切りの座標 または 長さ (数はshape属性による)】 リンク領域の相対座標 shape属性により下記の座標・長さ 指定
shape属性指定値
rect・rectangle(長方形)【左上(x)】,【左上(y)】,【右下(x)】,【右下(y)】
circle・circ(円)【中心(x)】,【中心(y)】,【半径】
poly・polygon(多角形) 【1つ目の頂点(x)】,【1つ目の頂点(y)】,

【最後の頂点(x)】,【最後の頂点(y)】
(閉じていない場合、自動的に閉じる)
default(その他領域)なし
download [=【ファイル名】]リソースダウンロード (リソースファイル名省略可)
href=【クリック時のリンク先】クリック時のリンク先 (省略:無効領域) 詳細は、<a>【ハイパーリンク】の属性参照
hreflang=【リンク先言語】リンク先言語
name=【名前】名前
nohrefリンク先なし(穴あき可・href属性の省略で対応)
ping=【リソースURL】ping 用 URL
referrerpolicy=【リファラー ポリシー】リファラー ポリシー (W3C:Referrer Policy (英語))
参照元情報の送信
"" (空文字列)上位ポリシー利用
"no-referrer"送信なし
"no-referrer-when-downgrade"セキュリティレベルが低下(TLS 保護:あり → なし):送信なし
その他:送信あり
"origin"オリジンのみ送信
"origin-when-cross-origin"クロスオリジン:オリジンのみ送信
その他:送信あり
"same-origin"同一オリジンへ移動:送信あり
その他:送信なし
"strict-origin"セキュリティレベルが低下(TLS 保護:あり → なし):送信なし
その他:オリジンのみ送信
"strict-origin-when-cross-origin"セキュリティレベルが上昇(TLS 保護:なし → あり):オリジンのみ送信
セキュリティレベルが低下(TLS 保護:あり → なし):送信なし
その他:送信あり
"unsafe-url"送信あり (安全でない)
rel=【リンク先の関係 (複数:半角スペース区切り)】

リンク先の関係 (大文字・小文字の区別なし)
(Link types:HTML5HTML 5.1HTML 5.2WHATWG)
定義機能備考
alternateハイパーリンク代替文書
authorハイパーリンク著者
bookmarkハイパーリンクブックマーク
external注記外部サイト
helpハイパーリンクヘルプ
license
(互換性:copyright)
ハイパーリンクライセンス
nextハイパーリンク次の文書
nofollow注記未承認ドキュメント
noopener注記オープナーの無効化
noreferrer注記HTTP Refer(r)er ヘッダの送信なし
prefetch外部リソース先行キャッシュ
prev
(互換性:previous)
ハイパーリンク前の文書
searchハイパーリンク検索
tagハイパーリンクタグ
拡張定義 (実装依存)
HTML5 link type extensions
shape=rect | rectangle | circle | circ | poly | polygon | default 領域の形状 (定義順に領域確保の為、優先領域を先に定義)
rect 長方形
rectangle 長方形 (一部でサポート)
circle
circ 円 (一部でサポート)
poly 多角形
polygon 多角形 (一部でサポート)
default その他領域
target=【フレーム名】 | 【ウィンドウ名】 | _blank | _self | _parent | _top 表示先 (フレーム名・ウィンドウ名 以外に下記指定可)
_blank 新規ウィンドウ
_self 現在フレーム
_parent 現在フレームの親
_top 元ウィンドウ全体(フレーム割解除)
type=【リンク先MIMEタイプ】リンク先MIMEタイプ

【グローバル属性】

accesskey=【アクセスキー (複数:半角スペース区切り)】アクセスキー
class=【クラス名 (複数:半角スペース区切り)】 所属クラス (複数指定:<style>【スタイル情報】)・外部スタイルシートで後から定義したほうが優先
contenteditable [ ="" (可能) | true (可能) | false (不可) | inherit (親要素継承) ]編集可否
contextmenu=<menu>【メニュー】 のid コンテキストメニューのid
data-*=【カスタムデータ】 カスタムデータ属性
dir=ltr (左から右) | rtl (右から左) | auto (自動) 文字表記方向 (ltr:left to right text or table / rtl:right to left text or table)
<bdo>【テキスト方向形式】の場合、ltr または rtlが必須
draggable=true (ドラッグ可能) | false (ドラッグ不可) | auto (ブラウザ既定) ドラッグ可否
dropzone=copy (ドロップデータのコピー) | move (ドロップデータを移動) | link (ドロップデータのリンク)
ドロップデータの扱い
hidden非表示
id=【id】id (ドキュメント中で一意 name【コントロール名 (送信データ名)】を含む)
(<a>【ハイパーリンク】のリンク先・CSS対象(#~)・スクリプト参照)
is=【定義名】定義名
itemid=【URL】アイテムのグローバル識別子
itemprop=【アイテムのプロパティ (複数:半角スペース区切り)】 アイテムのプロパティ
itemref=【要素IDのリスト】アイテムの参照リスト
itemscopeアイテムのプロパティ宣言
itemtype=【アイテムの型 (複数:半角スペース区切り)】アイテムの型
lang=【言語コード】言語コード (【主コード】-【副コード】 例:"ja":日本語 / "en":英語 / "en-US":アメリカ英語)
slot=<slot>【スロット】のname属性スロット名
spellcheck=true | falseスペルチェック有無
style=【スタイルシート (複数:セミコロン区切り / 最後のセミコロンは省略可)】スタイル
tabindex=【タブインデックス番号】タブインデックス
title=【説明文】説明 (多くはツールチップ表示)
<link>【メタデータリンク】:メタデータリンクのタイトル
<style>【スタイル情報】:スタイルシート名
translate="" (翻訳対象) | yes (翻訳対象) | no (翻訳対象外)翻訳可否
>

DOMインタフェース (HTMLAreaElement・HTMLElement)

interface HTMLAreaElement : HTMLElement { W3C:interface HTMLAreaElement (英語)   HTML 5.1HTML 5.2WHATWG

【プロパティ】

HTMLAreaElement プロパティ】

alt;代替テキスト
coords;リンク領域の相対座標
download;ダウンロードリソース名
hreflang;リンク先言語
referrerPolicy;リファラー ポリシー
rel;リンク先の関係
attribute DOMTokenListrelList;リンク先の関係 リスト
shape;領域の形状
target;表示先
type;リンク先MIMEタイプ

HTMLElement プロパティ】W3C:interface HTMLElement (英語) HTML 5.1HTML 5.2WHATWG

accessKey;アクセスキー
accessKeyLabel;アクセスキー表現文字列
contentEditable;編集可能状態 ("true":編集可能 / "false":編集不可 / "inherit":親要素継承)
Mapdataset;カスタムデータ属性 (data-*) マップ
dir;文字表記方向 ("ltr":左から右 / "rtl":右から左)
draggable;ドラッグ可否
[PutForwards=value] attribute DOMTokenListdropzone;ドロップデータの扱い
hidden;非表示状態
[TreatNullAs=EmptyString]innerText;内容 (テキスト形式)
isContentEditable;編集可否
lang;言語コード
spellcheck;スペルチェック有無
attribute longtabIndex;タブインデックス
title;説明
translate;翻訳可否

ElementCSSInlineStyle プロパティ】 HTMLElement implements ElementCSSInlineStyle; W3C:interface ElementCSSInlineStyle (英語)

attribute CSSStyleDeclarationstyle;スタイル

CSSStyleDeclaration プロパティ】 (仕様上、次と同等: CSSStyleDeclaration implements CSS2Properties) W3C:Interface CSS2Properties (英語)

style.~;スタイル属性 (例:style.color・style.backgroundColor)

Element プロパティ】interface HTMLElement : Element W3C:Interface Element (英語) HTML 5.1HTML 5.2WHATWG

[SameObject] attribute NamedNodeMapattributes;関連属性 マップ
[SameObject] attribute DOMTokenListclassList;クラス名 リスト
className;クラス名
id;id (ページ内で一意:name【コントロール(送信)名】を含む)
(innerHTML;)内容 (HTML形式) W3C:未定義 (参照:Element.outerHTMLNode.textContent (innerText))
localName;ローカル名
?namespaceURI;ネームスペースURI
(outerHTML;)タグを含む内容 (HTML形式) W3C:未定義 (参照:Element.innerHTMLNode.textContent (innerText))
?prefix;プリフィックス
tagName;タグ名

Node プロパティ】 interface Element : Node W3C:Interface Node (英語) HTML 5.1HTML 5.2WHATWG

?baseURI;ベースURI
[SameObject] childNodes;子ノード リスト
?firstChild;先頭子ノード
?lastChild;最終子ノード
?nextSibling;次の兄弟ノード
nodeName;ノード名
attribute unsigned shortnodeType;ノードタイプ
(ELEMENT_NODE / ATTRIBUTE_NODE / TEXT_NODE / CDATA_SECTION_NODE / ENTITY_REFERENCE_NODE / ENTITY_NODE / PROCESSING_INSTRUCTION_NODE / COMMENT_NODE / DOCUMENT_NODE / DOCUMENT_TYPE_NODE / DOCUMENT_FRAGMENT_NODE / NOTATION_NODE)
?nodeValue;ノード値
?ownerDocument;オーナードキュメント
?parentElement;親エレメント
?parentNode;親ノード
?previousSibling;前の兄弟ノード
?textContent;
(IE:innerText)
内容 (Text形式) (参照:Element.innerHTMLElement.outerHTML)
取得:要素内のHTMLタグを除外しテキストのみ
設定:HTMLタグはテキスト変換

GlobalEventHandlers プロパティ (一部) 】 HTMLElement implements GlobalEventHandlers; W3C:interface GlobalEventHandlers (英語) HTML 5.1HTML 5.2WHATWG

attribute EventHandler onabort;on~;イベントハンドラ (例:onclick・onfocus)

ParentNode プロパティ】Element implements ParentNode; W3C:Interface ParentNode (英語)

attribute unsigned longchildElementCount;子エレメントの数
[SameObject] attribute HTMLCollectionchildren;子エレメント コレクション
?firstElementChild;最初の子エレメント
?lastElementChild;最後の子エレメント

NonDocumentTypeChildNode プロパティ】Element implements NonDocumentTypeChildNode; W3C:Interface NonDocumentTypeChildNode (英語)

?previousElementSibling;前の兄弟エレメント
?nextElementSibling;次の兄弟エレメント

【メソッド】

HTMLElement メソッド】W3C:interface HTMLElement (英語) HTML 5.1HTML 5.2WHATWG

void click();クリック 操作
void focus();フォーカス設定 操作
void forceSpellCheck();スペルチェック
void blur();フォーカス喪失 操作

Element メソッド】interface HTMLElement : Element W3C:Interface Element (英語)

? getAttribute( name);属性取得
? getAttributeNS(? namespace, localName);属性取得 (ネームスペース指定)
HTMLCollection getElementsByClassName( classNames);エレメント コレクション取得 (クラス名指定)
HTMLCollection getElementsByTagName( localName);エレメント コレクション取得 (タグ名指定)
HTMLCollection getElementsByTagNameNS(? namespace, localName);エレメント コレクション取得 (ネームスペース・タグ名指定)
boolean hasAttribute( name);属性チェック
boolean hasAttributeNS(? namespace, localName);属性チェック (ネームスペース指定)
void removeAttribute( name);属性削除
void removeAttributeNS(? namespace, localName);属性削除 (ネームスペース指定)
void setAttribute( name, value);属性設定
void setAttributeNS(? namespace, name, value);属性設定 (ネームスペース指定)

Node メソッド】 interface Element : Node W3C:Interface Node (英語)

Node appendChild(Node node);子ノード追加
[NewObject] Node cloneNode(optional boolean deep = false);クローンノード作成
unsigned short compareDocumentPosition(Node other);他ノードとの位置比較
(DOCUMENT_POSITION_DISCONNECTED / DOCUMENT_POSITION_PRECEDING / DOCUMENT_POSITION_FOLLOWING / DOCUMENT_POSITION_CONTAINS / DOCUMENT_POSITION_CONTAINED_BY / DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC)
boolean contains(Node? other);指定子孫ノードの存在有無
boolean hasChildNodes();子ノードの存在有無
Node insertBefore(Node node, Node? child);指定ノード前挿入
boolean isDefaultNamespace(? namespace);デフォルトネームスペース チェック
boolean isEqualNode(Node? node);同一ノードチェック
? lookupNamespaceURI(? prefix);ネームスペースURI調査
? lookupPrefix(? namespace);ネームスペース プリフィックス調査
void normalize();標準化
Node removeChild(Node child);子ノード削除
Node replaceChild(Node node, Node child);子ノード置換

ParentNode メソッド】Element implements ParentNode; W3C:Interface ParentNode (英語)

Element? querySelector( selectors);指定セレクタ先頭エレメント取得
[NewObject] NodeList querySelectorAll( selectors);指定セレクタ ノードリスト取得

ChildNode メソッド】Element implements ChildNode; W3C:Interface ChildNode (英語)

void remove();削除
};
HTMLAreaElement implements URLUtils; W3C:URLUtils (英語)