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

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

試してみましょう

コンテンツカテゴリー フローコンテンツ、 記述コンテンツ、 知覚可能コンテンツ
許可されている内容 すべての透過的要素
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール 対応するロールなし
許可されている ARIA ロール 許可されている role なし
DOM インターフェイス HTMLMapElement

属性

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

name

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

例

2 つの領域があるイメージマップ

左側のオウムをクリックすると JavaScript に、右のオウムをクリックすると CSS に飛びます。

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" >
  <area shape="circle" coords="275,75,75"
        href="https://developer.mozilla.org/docs/Web/CSS"
        target="_blank" >
</map>
<img usemap="#primary" src="/en-us/docs/Web/HTML/Element/map/parrots.jpg" alt="350 x 150 pic">

結果

仕様書

Specification
HTML Standard
# the-map-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報