HTML 참조 매뉴얼

HTML 태그大全

HTML: <area> coords 속성

coords 속성은 이미지 맵区域的 x와 y 좌표를 지정합니다. coords 속성과 shape 속성을 함께 사용하여 区域의 크기, 형상 및 위치를 지정합니다. 힌트: 이미지 区域의 왼쪽 상단 좌표는 0,0입니다

온라인 예제

클릭 가능区域的 이미지 맵:

예제

<!DOCTYPE html>
<html>
<title>HTML:<area> coords 속성　-　기본 튜토리얼 웹 oldtoolbag.com</title>
<body>
<p>태양이나 하나의 행성을 클릭하여 가까이에서 관찰하세요</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
　　　<map name="planetmap">
　　<area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">
　　<area shape="circle" coords="90,58,3" href="mercur.html" alt="Mercury">
　　<area shape="circle" coords="124,58,8" href="venus.html" alt="Venus">
　　</map>　　
</body>
</html>

테스트 봐봅시다 «/›

브라우저 호환성

IEFirefoxOperaChromeSafari

모든 주요 브라우저가 coords 속성을 지원합니다.

정의와 사용법

coords 속성은 이미지 지도区域的 x와 y 좌표를 지정합니다.

coords 속성과 　shape 속성을 조합하여 지역의 크기, 형상 및 위치를 지정합니다.

힌트: 이미지 지역 왼쪽 상단 좌표는 0,0입니다.

HTML 4.01 HTML과5간의 차이

없음.

문법

<area coords="value">

속성 값

값	설명
x1,y1,x2,y2	shape 속성이 "rect"로 설정되면, 이 값은 사각형의 왼쪽 상단과 오른쪽 하단 좌표를 정의합니다.
x,y,radius	shape 속성이 "circ"로 설정되면, 이 값은 원심 좌표와 반지름을 정의합니다.
x1,y1,x2,y2,..,xn,yn	shape 속성이 "poly"로 설정되면, 이 값은 다각형 각 꼭짓점의 값을 정의합니다. 첫 번째 좌표와 마지막 좌표가 다를 경우, 다각형을 닫기 위해 브라우저는 마지막 쌍 좌표를 추가해야 합니다.

　HTML <area> 태그

HTML: <template> 태그