<map>: イメージマップ要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<map>HTML の要素で、<area> 要素とともにイメージマップ(クリック可能なリンク領域)を定義するために使用します。

試してみましょう

属性

この要素はグローバル属性を持っています。

name

name 属性は、マップを参照できるようにするための名前を指定します。この属性は必ず存在する必要があり、空白文字を含まない空でない値を持たなければなりません。 name 属性の値は、同じ文書内の他の <map> 要素の name 属性の値と同じであってはいけません。もし id 属性も指定されている場合は、両方の属性が同じ値でなければなりません。

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
map
name

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報