이미지 맵 좌표 설정

하나의 이미지내에서 좌표를 설정하여 링크를 설정하기 위해서는 이미지맵(image map) 을 사용하게 되는데, 프로그램을 사용하여도 되지만 소스자체가 워낙 간단하다보니 소스를 이해하여
직접 원하는 좌표를 선택하여 링크설정이 가능하다.



이미지맵 기본 사용 소스
<img src="이미지경로" usemap="#이미지맵 사용명칭">
<map name="이미지맵 사용명칭">
<area shape="rect" coords="좌표" href="링크주소" target="_blank"></map>


이미지맵 사용 예시
<img src="http://www.naver.com/image/test.png" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="0,100,100,100" href="http://naver.com" target="_blank">
<area shape="rect" coords="100,200,200,200" href="http://daum.net" target="_blank">
</map>


위를 해석하자면, www.naver.com/image/test.png 이미지를 불러와 imagemap 이라는 명칭을 부여하고, imagemap 이라는 안에 0,100,100,100 의 좌표에서는 naver.com 새창 으로 100,200,200,200 의 좌표에서는 daum.net 새창 으로 이동시킨다.



기타 옵션설정
shape : 좌표의 모양
(rect : 사각형좌표, circle : 원형좌표, poly : 다각형좌표)
coords : 이미지 좌표 x,y,x,y (시작점x,시작점y,끝점x,끝점y)
target : 링크여는 형태 (_self : 현재창, _blank : 새창에서)