shape属性

area要素のshape属性は、イメージマップにおける領域の形を指定する任意属性。coords属性と共に使用する。

ブラウザ対応

構文

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

形

  • circle、もしくは、circ： 円形。
  • rectangle、もしくは、rect： 四角形。
  • polygon、もしくは、poly： 多角形。
  • default： 画像全体。2014年5月現在、IEは、最新のIE11でも、この属性値だけ未対応のようだ。

shape属性に指定した形により、coords属性に指定する座標の数は異なる。

円形
<area shape="circle" coords="x,y,r">

<area shape="circ" coords="x,y,r">

shape属性には、circle、もしくは、circを指定する。

coords属性には、x,yに円の中心座標を指定し、rに円の半径を指定する。

四角形
<area shape="rectangle" coords="x1,y1,x2,y2">

<area shape="rect" coords="x1,y1,x2,y2">

shape属性には、rectangle、もしくは、rectを指定する。

coords属性には、x1,y1に四角形の左上端の座標を指定し、x2,y2に四角形の右下端の座標を指定する。

多角形
<area shape="polygon" coords="x1,y1,x2,y2,x3,y3・・・">

<area shape="poly" coords="x1,y1,x2,y2,x3,y3・・・">

shape属性には、polygon、もしくは、polyを指定する。

coords属性には、多角形の全ての角の座標を指定する。三角形の場合、x1,y1,x2,y2,x3,y3のように、３つの角の座標を指定する。六角形の場合、x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,x6,y6のように、６つの角の座標を指定する。

画像全体
<area shape="default">

shape属性には、defaultを指定する。

先に指定した領域がある場合、その領域以外が対象領域となる。

サンプルコード

円形

<area shape="circle" coords="50,50,40">

四角形

<area shape="rect" coords="10,10,90,90">

三角形

<area shape="polygon" coords="50,10,06,86,94,86">

六角形

<area shape="polygon" coords="50,10,15,30,15,70,50,90,85,70,75,30">

画像全体

<area shape="default">

サンプル

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

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