最終更新日

map要素

子要素のarea要素と組み合わせて、クリック可能なイメージマップを定義します。画像自体は、img要素またはobject要素のusemap属性で指定します。

name属性では、イメージマップの名前を定義します。name属性の指定は必須で、値に空の文字列や、スペース文字を含むことはできません。また、同じドキュメント内にある別のmap要素のname属性と重複した名前を付けることもできません。id属性を指定するときは、name属性と同じ値を使用してください。

map要素がPhrasingコンテンツのみを含む場合、Phrasingコンテンツの記述箇所で使用できます。それ以外の場合はFlowコンテンツの記述箇所で使用できます。

HTML5での変更点
特にありません
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ
Phrasingコンテンツ
省略不可 この要素がPhrasingコンテンツのみ含む場合はPhrasingコンテンツを子にできる要素。そうでなければFlowコンテンツを子にできる要素。 Transparent
属性 説明
name 文字列 イメージマップの名前を指定します。
グローバル属性 - -
イベント属性 - -
サンプルコード
<body>
  <h1>モーニングセット</h1>
  <p>下記の画像をクリックすると、それぞれの商品ページに移動します。</p>
  <p>
    <img src="morning.jpg" usemap="#morningset">
    <map name="morningset">
      <area href="muffin.html" shape="circle" coords="120,140,110" alt="マフィン">
      <area href="potato.html" shape="rect" coords="10,50,70,90" alt="ポテト">
      <area href="coffee.html" shape="rect" coords="70,10,140,40" alt="コーヒー">
    </map>
  </p>
</body>
参考文献:W3C HTML5「4.8.12 The map element」外部リンク
HOME