areaObject.coordsプロパティ

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座標をカンマ区切りで順番に指定する。
1つ目の頂点のX座標, 1つ目の頂点のY座標, 2つ目の頂点のX座標, 2つ目の頂点のY座標, 3つ目の頂点のX座標, 3つ目の頂点の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>

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>

スポンサード リンク

カテゴリー: Areaオブジェクト, DOM, JavaScript, リファレンス パーマリンク