area要素

area要素は、イメージマップにおける領域を設定する要素。

カテゴリー フロー・コンテンツ、フレージング・コンテンツ。
コンテキスト フレージング・コンテンツを内包できる要素内で使用できる。ただし、map要素の子孫要素でなければならない。
コンテンツ・モデル 空。
属性 グローバル属性。
任意属性：alt属性、coords属性、shape属性、href属性、target属性、download属性、rel属性、hreflang属性、type属性。
ブラウザ対応

構文

<area shape="形" coords="座標" href="URL">

shape属性に、領域の形を指定する。

coords属性に、領域の座標を指定する。

href属性に、リンク先のURLを指定する。

要点

  • area要素は、イメージマップにおける領域を指定する要素である。
  • map要素内に配置する。
  • area要素にhref属性がある場合、リンク領域となる。

属性

任意属性

属性 説明
alt属性 リンク領域の代替テキストを指定する属性。
coords属性 領域の座標を指定する属性。
shape属性 領域の形を指定する属性。
href属性 リンク先を指定する属性。
target属性 リンク先ドキュメントの開き方を指定する属性。
download属性 リンク先ドキュメントをダウンロードさせるかどうか、及び、ダウンロード時のファイル名を指定する属性。
rel属性 リンク先ドキュメントとの関連性を指定する属性。
hreflang属性 リンク先ドキュメントの言語コードを指定する属性。
type属性 リンク先ドキュメントのMIMEタイプを指定する属性。

サンプルコード

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ソースコード

<p><b>円形、四角形、三角形、六角形の各領域が、リンク領域</b><br>
	<img src="sample-area.png" usemap="#sample-area-1">
	<map name="sample-area-1">
		<area shape="circle" coords="50,50,40" href="http://html5.cyberlab.info" alt="ホーム">
		<area shape="rect" coords="110,10,190,90" href="http://html5.cyberlab.info/elements/" alt="要素">
		<area shape="polygon" coords="250,10,206,86,294,86" href="http://html5.cyberlab.info/elements/embedded/img.html" alt="img要素">
		<area shape="polygon" coords="350,10,315,30,315,70,350,90,385,70,375,30" href="http://html5.cyberlab.info/elements/embedded/map.html" alt="map要素">
	</map>
</p>
<p>円形、四角形、三角形、六角形の各領域<b>以外</b>が、リンク領域<br>
	<img src="sample-area.png" usemap="#sample-area-2">
	<map name="sample-area-2">
		<area shape="circle" coords="50,50,40">
		<area shape="rect" coords="110,10,190,90">
		<area shape="polygon" coords="250,10,206,86,294,86">
		<area shape="polygon" coords="350,10,315,30,315,70,350,90,385,70,375,30">
		<area shape="default" href="http://html5.cyberlab.info" alt="ホーム">
	</map>
</p>

実際の表示

円形、四角形、三角形、六角形の各領域が、リンク領域
ホーム 要素 img要素 map要素

円形、四角形、三角形、六角形の各領域以外が、リンク領域
ホーム