이미지맵 좌표 찍기 (usemap)

 

 

 

이미지에 링크를 걸때 사용되는 이미지맵을 공부해 볼까 합니다.

 

원리는 이미지를 불러와서 그 이미지를 맵으로 사용하겠다고 usemap 으로 map name을 지정해주고, area에 coords를 찍어서 링크를 연결해주는 건데요. 바로 소스 보여드리겠습니다.

 

 

 

<img src="이미지 주소" usemap="#map">


<map name="map">
<area shape="rect" coords="51,80,273,345" href="링크주소" target="_self" outline="none">
<area shape="circle" coords="120,255,20" href="링크주소" target="_self" >
<area shape="circle" coords="318,70,24" href="링크주소" target="_self" >
<area shape="poly" coords="201,245,308,505,221,379,375,411,435,534,315" href="링크주소" target="_self" >
<area shape="poly" coords="308,201,444,221,505,245,435,536,244,375,221,534,197" href="링크주소" target="_self" >
</map>

 

여기서 좀 더 알려드려야 할건 rect, circle, poly 인데요.

위 세아이들은 링크거는 영역의 모양을 뜻합니다.

 

rect는 사각형,  circle은 원, poly는 다각형!

 

좌표인 coords는 포토샵에서 하나씩 좌표를 딸 수도 있지만, 친절하게도 좌표를 따주는 사이트가 있으니 활요하시면 좋을 듯 합니다.

 

좌표 찍어주는 사이트 보기

 

좌표 찍는 방법은 아래와 같습니다.

 

1) 이미지를 upload 해준 후 accept를 누른다.

2) 이미지가 뜨면 map태크 속성을 지정한다.

3) +,- 로 좌표를 더하고 빼면서 설정해 준다.

 

※ 다각형 좌표 경우에는 shift + 클릭으로 닫아줍니다.