Image maps
<area> は HTML の要素で、イメージマップの中でクリック可能な領域をあらかじめ定義します。イメージマップでは、画像上の幾何学的な領域をハイパーテキストリンクと関連付けすることができます。
この要素は <map> 要素内だけで使用します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| HTML 属性 | ||||||
alt | 1 | 12 | 1 | 1 | 18 | 1 |
coords | 1 | 12 | 1 | 1 | 18 | 1 |
href | 1 | 12 | 1 | 1 | 18 | 1 |
implicit_noopener target="_blank"`は、`rel="noopener"`の動作を意味する。 | 88 | 88 | 79 | 12.1 | 88 | 12.2 |
| rel 属性は、リンク先のリソースと現在の文書との関係を定義します。 link、a、area、form で有効で、対応する値は属性が見つかった要素に依存します。 | 16 | 12 | 30 | 5 | 18 | 4.2 |
shape | 1 | 12 | 1 | 1 | 18 | 1 |
target | 1 | 12 | 1 | 1 | 18 | 1 |
ismap | 1 | 12 | 1 | 3 | 18 | 2 |
usemap | 1 | 12 | 1 | 3 | 18 | 2 |
name | 1 | 12 | 1 | 1 | 18 | 1 |
| DOM API | ||||||
| HTMLAreaElement インターフェイスは、（通常のオブジェクトである HTMLElement が継承によって利用できるもの以外に） area 要素のレイアウトと表示を操作するための特別なプロパティとメソッドを提供します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| alt は HTMLAreaElement インターフェイスのプロパティで、ハイパーリンクのテキストを指定し、イメージマップのリンクのテキストラベルを定義します。これは、 area 要素の alt 属性を反映します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| coords は HTMLAreaElement インターフェイスのプロパティで、要素の図形の座標を浮動小数点数のリストとして指定します。これは、 area 要素の coords 属性を反映します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| hash は HTMLAreaElement インターフェイスのプロパティで、この 要素の href における、 "#" に続くフラグメント識別子の文字列を返します。 URL にフラグメント識別子がない場合、このプロパティには空の文字列 "" が入ります。 | 1 | 12 | 1 | 1 | 18 | 1 |
| host は HTMLAreaElement インターフェイスのプロパティで、ホスト名、すなわち HTMLAreaElement.hostname が入った文字列で、 URL のportが空でない場合は、 ":" に続いて URL のHTMLAreaElement.portが続きます。この URL に hostname がない場合は、このプロパティには空文字列 ("") が入ります。 | 1 | 12 | 1 | 1 | 18 | 1 |
| hostname は HTMLAreaElement インターフェイスのプロパティで、この 要素の URL のdomain nameまたは IP addressのどちらかを含む文字列です。この URL にホスト名がない場合、このプロパティには空文字列 ("") が入ります。 IPv4 および IPv6 アドレスは、先頭の 0 が削除されるなど正規化され、ドメイン名は IDN に変換されます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLAreaElement.href はstringifierプロパティで、URL 全体を含む文字列を返し、href を更新することができます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| origin は HTMLAreaElement インターフェイスの読み取り専用プロパティで、 要素の href のオリジンを Unicode シリアライズしたものが入った文字列を返します。 | 32 | 17 | 26 | 10 | 32 | 10 |
| password は HTMLAreaElement インターフェイスのプロパティで、 要素の href のパスワード成分が入った文字列です。 URL にパスワードが存在しなかった場合、このプロパティには空文字列 ("") が入ります。 | 32 | 79 | 26 | 10 | 32 | 10 |
| HTMLAreaElement.pathname プロパティは、最初の '/' とその後に続く URL のパスから、クエリー文字列またはフラグメントを除外したもの入った文字列（または、パスがない場合は空文字列）です。 | 1 | 12 | 1 | 1 | 18 | 1 |
| port は HTMLAreaElement インターフェイスのプロパティで、 要素の href のポート番号が入った文字列です。ポートがプロトコルの既定値（ws: および http: の場合は 80、 wss: および https: の場合は 443、 ftp: の場合は 21）である場合、このプロパティは空文字列 ("") になります。 | 1 | 12 | 1 | 1 | 18 | 1 |
| protocol は HTMLAreaElement インターフェイスのプロパティで、この 要素の href のプロトコルまたはスキームが、最後の ":" まで入った文字列です。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLAreaElement.rel プロパティは rel 属性を反映しています。これは、空白で区切られたリンク種別のリストの入った文字列であり、area 要素で表されるリソースと現在の文書との関係を示します。 | 54 | 12 | 30 | 9 | 54 | 9 |
| HTMLAreaElement.relList 読み取り専用プロパティは、rel 属性を反映しています。これは生きた DOMTokenList で、 area 要素で表されるリソースと現在の文書との間の関係を示すリンク種別のセットが入ります。 | 65 | 18 | 30 | 9 | 65 | 9 |
| search は HTMLAreaElement インターフェイスのプロパティで、検索文字列、またの名をクエリー文字列、 "?" に続いて 要素の href の引数を含む文字列です。URL に検索クエリーがない場合、このプロパティには空文字列 ("") が入ります。 | 1 | 12 | 1 | 1 | 18 | 1 |
| shape は HTMLAreaElement インターフェイスのプロパティで、イメージマップ領域の形状を指定します。これは、 area 要素の shape 属性を反映します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| target は HTMLAreaElement インターフェイスのプロパティで、リンクされたリソースを表示する場所を示す文字列です。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLAreaElement.toString() はstringifierメソッドで、 URL 全体の入った文字列を返します。 これは、 HTMLAreaElement.href の読み取り専用バージョンです。 | 32 | 12 | 22 | 10.1 | 32 | 10.3 |
| username は HTMLAreaElement インターフェイスのプロパティで、 要素の href のユーザー名成分を含む文字列です。 URL にユーザー名がない場合、このプロパティには空文字列 ("") が含まれます。 | 32 | 79 | 26 | 10 | 32 | 10 |
| HTMLImageElement の isMap プロパティは、論理値で、画像がサーバーサイドイメージマップで使用されることを示します。 これは a 要素内にある画像にのみ使用することができます。 | 1 | 12 | 1 | 3 | 18 | 1 |
| useMap は HTMLImageElement インターフェイスのプロパティで、 HTML の usemap 属性を反映し、この画像に適用されるクライアントサイドイメージマップの名前を提供する文字列です。 | 1 | 12 | 1 | 3 | 18 | 1 |
| HTMLMapElement インターフェイスは、（継承によって利用できる、通常のオブジェクトである HTMLElement インターフェイスのもの以外に）map 要素のレイアウトと表示を操作するための特別なプロパティとメソッドを提供します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| areas は HTMLMapElement インターフェイスの読み取り専用プロパティで、この map 要素に関連付けられた area 要素の集合を返します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| name は HTMLMapElement インターフェイスのプロパティで、 要素の一意な名前を表します。 この値は img 要素の useMap 属性と一緒に使うことで、 要素を参照することができます。 | 1 | 12 | 1 | 3 | 18 | 1 |
| その他 | ||||||
| noopener キーワードを rel 属性に指定すると、 a, area, form の各要素では、ターゲットリソースへ移動する際、開いた元の文書へのアクセスを新しい閲覧コンテキストに許可しないことをブラウザーに指示します。開かれたウィンドウの Window.opener プロパティプロパティは設定されません（null を返します）。 | 49 | 79 | 52 | 10.1 | 49 | 10.3 |
| noreferrer キーワードを rel 属性に指定すると、 a, area, form の各要素はターゲットリソースへ移動する際、 Referer ヘッダーを省略してリファラー情報が漏洩しないようにブラウザーに指示します。それに加えて、 noopener キーワードを設定しているかのように動作します。 | 16 | 13 | 33 | 5 | 18 | 4.2 |
| は HTML の要素で、area 要素とともにイメージマップ（クリック可能なリンク領域）を定義するために使用します。 | 1 | 12 | 1 | 1 | 18 | 1 |
- Firefox 29 から Firefox 40 では、返される値のパーセントデコードが正しくありませんでした。
- Firefox 49 より前のバージョンでは、`blob` スキームを使用した URL の結果が誤って `null` を返していました。
- Firefox 53 より前のバージョンでは、`pathname` と `search` の `HTMLHyperlinkElementUtils` プロパティは URL の間違った部分を返していました。例えば、URL が `https://z.com/x?a=true&b=false` の場合、`pathname` は `'/x'` と `'?a=true&b=false'` を、`search` は '' を返します。これは現在修正されている。
- Firefox 53 より前のバージョンでは、`pathname` と `search` の `HTMLHyperlinkElementUtils` プロパティは URL の間違った部分を返していました。例えば、URL が `https://z.com/x?a=true&b=false` の場合、`pathname` は `'/x'` と `'?a=true&b=false'` を、`search` は '' を返します。これは現在修正されている。
- Firefox 63 以前では、`rel="noopener"` はデフォルトですべての機能が無効化されたウィンドウを作成していました。Firefox 63 以降、これらのウィンドウは他のウィンドウと同じ機能がデフォルトで有効になります。
- Firefox 5 より前の Quirks モードでは、マッチング時に空のマップがスキップされ、空でないマップが優先されることはなくなりました。
- Firefox 17 以前では、`<map>` HTML 要素のデフォルトのスタイルは `display: block;` でした。これは現在では `display: inline;` であり、他のブラウザの動作と一致しています。Quirks Mode ではすでにそうなっていました。
基本構文
<img src="map.png" usemap="#mymap" alt="フロアマップ">
<map name="mymap">
<area shape="rect" coords="0,0,100,100" href="/room1" alt="会議室1">
<area shape="circle" coords="200,150,50" href="/room2" alt="会議室2">
</map>ライブデモ
Map legend table
Combine a visual map with a text legend so the clickable regions remain understandable.
実務での使いどころ
-
Image maps の活用
<area> は HTML の要素で、イメージマップの中でクリック可能な領域をあらかじめ定義します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。