HTML 이미지 맵(image map)에서 클릭 가능한 영역의 좌표를 설정하려면 coords 속성을 사용합니다. 이 속성은 <area> 태그와 함께 사용되며, 이미지 위에서 링크가 활성화되는 영역의 위치와 크기를 정의합니다.
coords 속성의 좌표 형식
shape 속성으로 지정한 영역 모양에 따라 좌표 값을 입력하는 방식이 달라집니다.
- circle(원형): 중심점의 x좌표, y좌표, 반지름 순으로 입력합니다. 예:
"154,150,59" - rect(사각형): 왼쪽 위 모서리의 x, y 좌표와 오른쪽 아래 모서리의 x, y 좌표를 입력합니다.
- poly(다각형): 각 꼭짓점의 x, y 좌표를 순서대로 나열하여 입력합니다.
예제
다음 코드를 실행하면 원형 영역에 대한 coords 속성 사용법을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML coords 속성</title>
</head>
<body>
<img src = "/images/html.gif" alt = "HTML Map" border = "0" usemap = "#html"/>
<map name = "html">
<area shape = "circle" coords = "154,150,59" href = "about/about_team.htm"
alt = "Team" target = "_self" />
</map>
</body>
</html>위 예제에서 usemap 속성은 이미지를 <map> 요소와 연결하고, shape="circle"과 함께 coords="154,150,59"는 이미지의 (154, 150) 위치를 중심으로 반지름 59픽셀인 원형 클릭 영역을 만듭니다. 해당 영역을 클릭하면 지정된 href 링크로 이동합니다.