HTML <area> coords 속성

HTML <area> 태그

정의와 사용법

coords 속성 속성은 이미지 맵에서 영역의 좌표를 정의합니다.

coords 속성 속성과 shape 속성 영역의 크기, 형상 및 위치를 지정하기 위해 함께 사용됩니다.

ヒント:영역의 왼쪽 상단 좌표는 0,0입니다.

주의:area 태그의 좌표가 다른 영역과 겹치는 경우, 가장 먼저 나타난 area 태그가 우선됩니다. 브라우저는 이미지 경계를 벗어난 좌표를 무시합니다.

예제

coords 속성을 사용하여 이미지 맵에서 각 영역의 좌표를 정의합니다:

<map name="planetmap">
<area shape="rect" coords="0,0,114,576" href="sun.htm" alt="Sun">
<area shape="circle" coords="190,230,5" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="228,230,5" href="venus.htm" alt="Venus">
</map>

직접 시도해 보세요

문법

<area coords="value">

속성 값

값 설명
x1,y1,x2,y2 직사각형의 왼쪽 상단과 오른쪽 하단 좌표를 정의합니다 (shape="rect").
x,y,radius 원의 중심 좌표와 반지름을 정의합니다 (shape="circle").
x1,y1,x2,y2,...,xn,yn

다각형의 변의 좌표를 정의합니다.

첫 번째와 마지막 좌표 쌍이 다를 경우, 브라우저는 마지막 좌표 쌍을 추가하여 다각형을 닫습니다 (shape="poly").

상세 설명:

<area> 태그의 coords 속성은 클라이언트 이미지 맵에서 마우스에 민감한 영역의 좌표를 정의합니다. 좌표의 숫자와 의미는 shape 속성에 의해 결정된 영역 형상에 따릅니다. 클라이언트 이미지 맵에서 히플링 영역을 직사각형, 원형, 다각형 등으로 정의할 수 있습니다.

각 형상의 적절한 값이 다음과 같습니다:

원형: shape="circle", coords="x,y,z"

여기서 x와 y는 원의 중심 위치를 정의합니다. ("0,0"은 이미지의 왼쪽 상단 코디네이트입니다), r은 픽셀 단위의 원형 반지름입니다.

다각형: shape="polygon", coords="x1,y1,x2,y2,x3,y3,..."

각 "x,y" 좌표는 다각형의 한 점을 정의합니다. ("0,0"은 이미지의 왼쪽 상단 코디네이트입니다). 삼각형을 정의하려면 최소 3개의 좌표가 필요하며, 고도의 다각형은 더 많은 점이 필요합니다.

다각형은 자동으로 닫혀서, 목록의 마지막에 첫 번째 좌표를 반복하여 전체 영역을 닫지 않아도 됩니다.

사각형: shape="rectangle", coords="x1,y1,x2,y2"

첫 번째 좌표는 사각형의 한 가운데의 좌표이며, 다른 좌표는 대각선의 좌표입니다. "0,0"은 이미지 왼쪽 상단의 좌표입니다. 사각형을 정의하는 것은 사각형의 네 가운데 하나의 정점 좌표를 정의하는 것으로 간주됩니다.

예를 들어, 아래의 XHTML 단편은 100x100 픽셀 이미지의 오른쪽 아래 사분면에 위치하며, 마우스에 민감한 영역을 정의하고 이미지 중앙에 원형 영역을 정의합니다.

<map name="map">
  <area shape="rect" coords="75,75,99,99" nohref="nohref">
  <area shape="circ" coords="50,50,25" nohref="nohref">
</map>

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원

HTML <area> 태그