<map> 要素は、usemap 属性を持つ<img> 要素や<object> 要素と一緒にイメージマップを定義します。ユーザーの操作に反応する領域は、要素内のや<area> 要素で行います。イメージマップ名を指定するname 属性は必須です。
- カテゴリー
- フロー・コンテンツ、パルパブル・コンテンツ、フレージング・コンテンツ
- 配置場所
- フレージング・コンテンツが置ける場所。
- 内容
- 親要素に入れられる要素
- 属性
-
name="イメージマップ名"- イメージマップと画像を関連付けるためにイメージマップの名前を指定します。名前は、同じドキュメント内の別の
<map> 要素と干渉しない一意の値でなければいけません。id 属性も指定されている場合、両方の属性は同じ値である必要があります。 - グローバル属性
accesskey,autocapitalize,autofocus,class,contenteditable,data-*,dir,draggable,enterkeyhint,hidden,id,inputmode,is,itemid,itemprop,itemref,itemscope,itemtype,lang,nonce,spellcheck,style,tabindex,title,translate
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>HTML5 › map</title>
</head>
<body>
<h1>HTML5 › map</h1>
<p>
Please select a shape:
<img src="https://www.w3.org/TR/2014/REC-html5-20141028/images/sample-usemap.png" usemap="#shapes" alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
<map name="shapes">
<area shape="rect" coords="50,50,100,100"> <!-- the hole in the red box -->
<area shape="rect" coords="25,25,125,125" href="https://emwai.jp/reference/html5/about/" alt="Red box.">
<area shape="circle" coords="200,75,50" href="https://emwai.jp/reference/html5/_html/" alt="Green circle.">
<area shape="poly" coords="325,25,262,125,388,125" href="https://emwai.jp/reference/html5/_head/" alt="Blue triangle.">
<area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="https://emwai.jp/reference/html5/_body/" alt="Yellow star.">
</map>
</p>
</body>
</html>