このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<map>: イメージマップ要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<map> はHTML の要素で、<area> 要素とともにイメージマップ（クリック可能なリンク領域）を定義するために使用します。
試してみましょう
<map name="infographic"> <area shape="poly" coords="130,147,200,107,254,219,130,228" href="https://developer.mozilla.org/docs/Web/HTML" alt="HTML" /> <area shape="poly" coords="130,147,130,228,6,219,59,107" href="https://developer.mozilla.org/docs/Web/CSS" alt="CSS" /> <area shape="poly" coords="130,147,200,107,130,4,59,107" href="https://developer.mozilla.org/docs/Web/JavaScript" alt="JavaScript" /></map><img usemap="#infographic" src="/shared-assets/images/examples/mdn-info2.png" alt="MDN infographic" />img { display: block; margin: 0 auto; width: 260px; height: 232px;}属性
この要素はグローバル属性を持っています。
例
2 つの領域があるイメージマップ
左側のオウムをクリックすると JavaScript に、右のオウムをクリックすると CSS に飛びます。
HTML
html
<!-- Photo by Juliana e Mariana Amorim on Unsplash --><map name="primary"> <area shape="circle" coords="75,75,75" href="https://developer.mozilla.org/docs/Web/JavaScript" alt="JavaScript" /> <area shape="circle" coords="275,75,75" href="https://developer.mozilla.org/docs/Web/CSS" alt="CSS" /></map><img usemap="#primary" src="parrots.jpg" alt="350 x 150 picture of two parrots" />結果
技術的概要
| コンテンツカテゴリー | フローコンテンツ、記述コンテンツ、 知覚可能コンテンツ |
|---|---|
| 許可されている内容 | すべての透過的要素 |
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されているrole なし |
| DOM インターフェイス | HTMLMapElement |
仕様書
| Specification |
|---|
| HTML # the-map-element |