[attribute] HTML - coords 속성 - 이미지맵 링크영역 좌표 표시 (= coords속성 = 코즈속성/코드스속성/코우오드스속성) ※ 좌표속성

1. coords 예제 - 이미지맵 영역 좌표 표시
2. coords 정의
3. coords 구문

coords 예제 - 이미지맵 영역 좌표 표시

 

<img src="https://i.imgur.com/NUjTqSd.gif" width="389" height="26" border="0" usemap="#Search_Engine">

<map name="Search_Engine">

    <area shape="rect" coords="4,3,68,21" href="http://naver.com" target="_blank" onFocus="blur()">

    <area shape="rect" coords="78,4,119,20" href="http://daum.net" target="_blank" onFocus="blur()">

    <area shape="rect" coords="128,5,193,19" href="http://www.paran.com" target="_blank" onFocus="blur()">

    <area shape="rect" coords="204,3,259,20" href="http://nate.com" target="_blank" onFocus="blur()">

    <area shape="rect" coords="269,2,323,20" href="http://www.google.co.kr/" target="_blank" onFocus="blur()">

    <area shape="rect" coords="331,4,385,18" href="http://kr.yahoo.com/" target="_blank" onFocus="blur()">

</map>

결과 보기 

coords 정의

 

이미지맵 에어리어(area: 링크영역)의 좌표(coordinate) 지정.

 

---

 

1.

• shape 속성과 함께 사용되어, 링크영역의 (크기/모양/배치)를 지정.
• 링크영역 왼쪽상단 구석지 좌표: 0,0

 

2. coords 속성 사용 가능 태그 종류

<area>

 

3.

모든 브라우저 지원.

 

coords 구문

 

<area coords="value">

 

---

[속성값]

 

value

링크 영역 표시 좌표값

• x1,y1,x2,y2 :  왼쪽 상단, 오른쪽 하단 코너 좌표값 (사각형 모양)
• x,y,radius :  원의 중심 좌표값과 반지름 (원 모양)
• x1,y1,x2,y2,..,xn,yn :  각 다각형의 코너 좌표값 (다각형 모양)  만약, 처음과 마지막 좌표값 짝이 동일하지 않을 시,  브라우저가 자동으로 마지막 좌표값을 추가함.