map要素

map要素は、領域を設定するarea要素と共に、イメージマップを定義する要素。

カテゴリー フロー・コンテンツ、フレージング・コンテンツ、パルパブル・コンテンツ。
コンテキスト フレージング・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル トランスペアレント・コンテンツ・モデル。
属性 グローバル属性。
必須属性：name属性。
ブラウザ対応

構文

<map name="イメージマップ名">
	area要素で、領域を設定。
</map>

必須属性であるname属性に、イメージマップ名を指定する。

要点

属性

必須属性

属性 説明
name属性 イメージマップ名を指定する属性。

サンプルコード

img要素

<img src="sample.png" usemap="#sampleImgMap">
<map name="sampleImgMap">
	<area shape="rect" coords="0,0,100,50" href="sample1.html" alt="サンプル１">
	<area shape="rect" coords="100,0,200,50" href="sample2.html" alt="サンプル２">
</map>

object要素

<object data="sample.png" usemap="#sampleImgMap"></object>
<map name="sampleImgMap">
	<area shape="rect" coords="0,0,100,50" href="sample1.html" alt="サンプル１">
	<area shape="rect" coords="100,0,200,50" href="sample2.html" alt="サンプル２">
</map>

サンプル

HTMLソースコード

<div>
	<img src="sample-img-usemap.png" usemap="#sample-img-usemap">
	<map name="sample-img-usemap">
		<area shape="rect" coords="1,0,98,50" href="http://html5.cyberlab.info" alt="ホーム">
		<area shape="rect" coords="101,0,198,50" href="http://html5.cyberlab.info/elements/" alt="要素">
		<area shape="rect" coords="201,0,298,50" href="http://html5.cyberlab.info/elements/embedded/img.html" alt="img要素">
	</map>
</div>
<div>
	<object data="sample-object-usemap.png" usemap="#sample-object-usemap"></object>
	<map name="sample-object-usemap">
		<area shape="rect" coords="1,0,98,50" href="http://html5.cyberlab.info" alt="ホーム">
		<area shape="rect" coords="101,0,198,50" href="http://html5.cyberlab.info/elements/" alt="要素">
		<area shape="rect" coords="201,0,298,50" href="http://html5.cyberlab.info/elements/embedded/object.html" alt="object要素">
	</map>
</div>

実際の表示

ホーム 要素 img要素
ホーム 要素 object要素