HTML

HyperText Markup Language map element.

map 要素

　map要素は、中に area要素を入れて使うことで、イメージマップを定義することが出来ます。イメージマップとは、img要素や object要素で表されたイメージの中の特定の幾何学的な領域をハイパーリンクにしたものです。そのハイパーリンクに相当する幾何学的な領域を map要素と area要素で指定します。

　イメージマップを実現するためには、イメージマップのイメージを表す img要素や object要素と、イメージマップの定義とを結び付ける必要があります。そのためには、まず map要素に、name属性を使って、その名前を指定しなければいけません。map要素の name属性は必須で、スペース文字を含まない空でない値を指定しなければいけません。次に、イメージを表す img要素や object要素の usemap属性に、map要素のハッシュ参照名をセットします。

<p>
	形状を選択してください：<br>
	<img src="" usemap="#shapes" alt="赤色の穴あきボックス、緑色の円、青色の三角形、黄色の星の 4 つの形状が利用できます。">
	<map name="shapes">
		<area shape="rect" coords="47,48,101,96"> <!-- 赤色のボックスの穴 -->
		<area shape="rect" coords="11,12,139,133" href="red.html" alt="赤色のボックス">
		<area shape="circle" coords="221,76,65" href="green.html" alt="緑色の円">
		<area shape="poly" coords="365,19,294,134,435,135" href="blue.html" alt="青色の三角形">
		<area shape="poly" coords="505,13,486,61,434,78,486,96,506,141,526,97,577,78,526,61" href="yellow.html" alt="黄色の星">
	</map>
</p>

　この例では、1つのイメージに 4つの図形が描かれています。そして、map要素と area要素を使って、そのイメージをイメージマップとして定義しています。

　img要素には usemap="#shapes" がセットされています。そして、map要素には name="shapes" がセットされています。これによって、img要素と map要素が結び付けられます。img要素の usemap属性の値では、先頭に # を入れなければいけない点に注意してください。

　map要素の中では、実際にハイパーリンクとしてクリッカブルになる領域を area要素で定義します。area要素を使った形状の定義については、area要素をご覧ください。

map要素の概要

Category 「カテゴリー」

Flow content 「フロー・コンテンツ」

フレージング・コンテンツだけを入れた場合：Phrasing content 「フレージング・コンテンツ：記述コンテンツ」

Content model 「コンテンツ･モデル」

トランスペアレント

利用可能な場所

フレージング・コンテンツが期待される場所

タグの省略

不可。

要素固有のコンテンツ属性

name

イメージマップを参照するために使う名前を指定します。

標準的なスタイル

-