SYNCERのロゴ
アイキャッチ画像

coords属性 - area要素の座標

area要素のcoords属性は、領域の座標を定義するための属性です。画像の左上部分の座標を(0,0)として、ハイパーリンクのクリックできる領域をこの属性で表現して下さい。

概要

要素
area要素
DOM Interface
HTMLAreaElement.coords
仕様書
https://html.spec.whatwg.org/multipage/image-maps.html#attr-area-coords

ハイパーリンクの領域。座標を表す数字をコンマ(,)で区切って必要な数だけ指定する。shape属性によって指定方法が違う。

shape属性構文説明
circlex,y,r円の中心x、円の中心y、半径r、の3つの数値を指定する。
rectx1,y1, x2,y2レクタングルの左上(x1,y1)、右上(x2, y2)、の4つの数値を指定する。
polyx1,y1, x2,y2, x3,y3, ...座標1(x1,y1)、座標2(x2,y2)、座標3(x3,y3)、と任意の数だけ座標を指定する。
<area shape="circle" coords="100,100, 50">
<area shape="rect" coords="50,25, 150,185">
<area shape="poly" coords="0,0, 200,0, 0,200">

説明

この属性はshape属性とセットで理解しなければいけません。area要素のチュートリアルで解説しています。

デモ

coords属性を指定したデモです。画像の中心部分の円の領域だけをクリックできるようになっています。

<!-- このコードは編集できます。 -->

<img src="./image.png" usemap="#my-circle-01" width="200" height="200">
<map name="my-circle-01">
	<area shape="circle" coords="100,100, 50" href="https://syncer.jp/" target="_blank" alt="SYNCER">
</map>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月18日 (月)
コンテンツを公開しました。