..

Search

coords

coords

<area> 태그의 coords 속성


HTML <area> 태그 ⇒


정의 및 특징

<area> 태그의 coords 속성은 이미지맵(image-map)에서 해당 <area> 요소의 좌표를 명시합니다.

 

coords 속성은 해당 <area> 요소의 크기와 모양, 배치 등을 명시하기 위하여 shape 속성과 함께 사용되며, 이때 해당 영역의 왼쪽 위 모서리(top-left corner)의 좌표는 언제나 (0,0)이 됩니다.


문법

<area coords=“좌푯값”>

속성값

속성값   설명

x1,y1,x2,y2

 

사각형의 왼쪽 위 모서리(top-left corner)와 오른쪽 아래 모서리(bottom-right corner)의 좌표를 명시함.

(단, shape 속성값이 “rect”인 경우에만 사용할 수 있음)

x,y,반지름

 

원의 중심점 좌표와 반지름을 명시함.

(단, shape 속성값이 “circle”인 경우에만 사용할 수 있음)

x1,y1,x2,y2,...,xn,yn

 

다각형의 각 모서리에 대한 좌표를 명시함. 만약 첫 번째 좌표쌍과 마지막 좌표쌍이 일치하지 않는다면, 브라우저가 자동으로 다각형을 닫기 위하여 마지막 좌표쌍을 추가함.

(단, shape 속성값이 “poly”인 경우에만 사용할 수 있음)


예제
<img src="/examples/images/img_imagemap.jpg" alt="진실 혹은 거짓" usemap="#vending" style="width:320px; height:240px">
<map name="vending">
  <area shape="poly" coords="50,150,230,120,230,180,50,210" alt="진실" href="https://ko.wikipedia.org/wiki/%EC%A7%84%EC%8B%A4">
  <area shape="circle" coords="140,100,40" alt="거짓" href="https://ko.wikipedia.org/wiki/%EA%B1%B0%EC%A7%93%EB%A7%90">
</map>

코딩연습 ▶


지원하는 브라우저 및 버전

속성명

chrome

edge

ie

firefox

safari

opera

coords 지원함 지원함 지원함 1.0 지원함 지원함

연습문제