usemap属性 ≪ img要素 ≪ 埋め込みコンテンツ ≪ 要素 ≪ HTML5入門

usemap属性

img要素のusemap属性は、関連付けるイメージマップの名前を指定する任意属性。

ブラウザ対応

構文

<img src="URL" usemap="#イメージマップ名">

イメージマップ名

#に続けて、関連付けるイメージマップの名前を指定する。

サンプルコード

<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>

サンプル

HTMLソースコード

<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>

実際の表示