areaObject.shapeは、area要素（エリア要素）のshape属性の値を取得、もしくは、設定するプロパティ。
shape属性には、リンク領域の形状を指定することができる。
構文
取得
var $shape = $areaElementReference.shape;
戻り値
area要素（エリア要素）のshape属性の値。
設定
$areaElementReference.shape = 形状;
- 形状
- リンク領域の形状を指定。
- 値：
rectまたはrectangle：四角形。circまたはcircle：円形。polyまたはpolygon：多角形。default：マップ画像全体。
- 初期設定値は、
rect。
サンプル
変更後のshape属性の値：
変更後のcoords属性の値：
サンプルの動作について
- 「四角形」ボタンをクリックすると、area要素のshape属性値を「rect」、coords属性を「50,25,150,125」に設定する。「変更後のshape属性の値：」の右横に「rect」と表示、「変更後のcoords属性の値」の右横に「50,25,150,125」と表示する。
- 「円形」ボタンをクリックすると、area要素のshape属性値を「circ」、coords属性を「100,75,50」に設定する。「変更後のshape属性の値：」の右横に「circ」と表示、「変更後のcoords属性の値」の右横に「100,75,50」と表示する。
- 「三角形」ボタンをクリックすると、area要素のshape属性値を「poly」、coords属性を「100,25,50,125,150,125」に設定する。「変更後のshape属性の値：」の右横に「poly」と表示、「変更後のcoords属性の値」の右横に「100,25,50,125,150,125」と表示する。
- 「マップ画像全体」ボタンをクリックすると、area要素のshape属性値を「default」に設定する。「変更後のshape属性の値：」の右横に「default」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setShape( $shape, $coords ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.shape = $shape;
var $shape = $elementReference.shape;
document.getElementById( "sampleOutputA" ).innerHTML = $shape;
$elementReference.coords = $coords;
var $coords = $elementReference.coords;
document.getElementById( "sampleOutputB" ).innerHTML = $coords;
}
</script>
function setShape( $shape, $coords ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.shape = $shape;
var $shape = $elementReference.shape;
document.getElementById( "sampleOutputA" ).innerHTML = $shape;
$elementReference.coords = $coords;
var $coords = $elementReference.coords;
document.getElementById( "sampleOutputB" ).innerHTML = $coords;
}
</script>
HTML
<div>
<img src="http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-area-shape-sample.png" usemap="#sampleMap">
<map name="sampleMap">
<area id="sample" shape="circle" coords="100,75,50" href="http://alphasis.info/" target="_blank" />
</map>
</div>
<p>
<button onclick="setShape('rect','50,25,150,125');">四角形</button>
<button onclick="setShape('circ','100,75,50');">円形</button>
<button onclick="setShape('poly','100,25,50,125,150,125');">三角形</button>
<button onclick="setShape('default','');">マップ画像全体</button>
</p>
<p>変更後のshape属性の値：<span id="sampleOutputA"></span></p>
<p>変更後のcoords属性の値：<span id="sampleOutputB"></span></p>
<img src="http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-area-shape-sample.png" usemap="#sampleMap">
<map name="sampleMap">
<area id="sample" shape="circle" coords="100,75,50" href="http://alphasis.info/" target="_blank" />
</map>
</div>
<p>
<button onclick="setShape('rect','50,25,150,125');">四角形</button>
<button onclick="setShape('circ','100,75,50');">円形</button>
<button onclick="setShape('poly','100,25,50,125,150,125');">三角形</button>
<button onclick="setShape('default','');">マップ画像全体</button>
</p>
<p>変更後のshape属性の値：<span id="sampleOutputA"></span></p>
<p>変更後のcoords属性の値：<span id="sampleOutputB"></span></p>