<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"
target="_blank"
alt="JavaScript" />
<area
shape="circle"
coords="275,75,75"
href="https://developer.mozilla.org/docs/Web/CSS"
target="_blank"
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 |
ブラウザーの互換性
Loading…