areaObject.coordsは、area要素（エリア要素）のcoords属性の値を取得、もしくは、設定するプロパティ。
coords属性には、リンク領域を座標等で指定することができる。指定方法は、リンク領域の形状ごとに異なる。
構文
取得
var $coords = $areaElementReference.coords;
戻り値
area要素（エリア要素）のcoords属性の値。
設定
$areaElementReference.coords = 座標等;
- 座標等
- リンク領域の位置や大きさを座標等で指定する。
- マップ画像の左上隅の座標を
0,0とする。 - 指定方法は、リンク領域の形状ごとに異なる。
- 四角形
- shape属性に
rectまたはrectangleを指定した四角形の場合、左上と右下の頂点のXY座標をカンマ区切りで順番に指定する。 左上X座標, 左上Y座標, 右下X座標, 右下Y座標- 円形
- shape属性に
circまたはcircleを指定した円形の場合、中心点のXY座標と半径をカンマ区切りで順番に指定する。 中心X座標, 中心Y座標, 半径- 多角形
- shape属性に
polyまたはpolygonを指定した多角形の場合、全ての頂点のXY座標をカンマ区切りで順番に指定する。 １つ目の頂点のX座標, １つ目の頂点のY座標, ２つ目の頂点のX座標, ２つ目の頂点のY座標, ３つ目の頂点のX座標, ３つ目の頂点のY座標 ・・・- マップ画像全体
- shape属性に
defaultを指定し、マップ画像全体をリンク領域とした場合、coords属性は無効。
サンプル
変更後の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>