이미지맵에서 좌표설정하여 링크걸기!

   이미지맵에서 좌표설정하여 링크걸기!

지금까지 하나의 이미지 내에 링크를 걸기위해 
이미지를 조각조각내서 링크가 걸릴 버튼 이미지에만 링크를 걸어왔던 나.

왜 아무도 나에게 이 바보같은 짓을 그만두라고 알려주지 않았던걸까.
이미지를 쪼개지 않아도 좌표만 알면 간단하게 링크가 걸리는 것을 왜 아무도 말해주지 않은거지.......

위의 이미지를 기준으로 하였을 때, 빨간버튼에만 링크를 거는 것은 상당히 간단하다.
이미지를 맵으로 설정하고 (이미지를 하나의 지도라고 생각해보자)
좌표를 찍어 해당 위치에만 링크를 걸겠다고 명령어를 적어주기만 하면된다. (지도 위에 좌표를 찍을 뿐)

<img src="이미지주소" border="0", alt="" usemap="#Map">
<map name="Map">
<area shape="rect" coords="좌표값" href="링크걸릴 주소" target="_blank"> </map>

그런데 좌표값? 그건 누가알려주나요. 간단하다.
윈도우의 기본 유틸 '그림판' 조차 좌표값을 알려주고 있다.
그림판에서 이미지를 열어, 이미지 위에서 마우스를 마구 움직여보면
아래쪽에 111, 76px 등으로 좌표값이 마구마구 바뀌는 것을 확인할 수 있다. 아래 수치를 입력하면 끝!

하지만 좌표값부분에 111,76 과 같이 한 지점의 숫자만을 써주어서는 안된다.
한 지점의 숫자를 쓰게 될 경우 정확히 111,76 지점에만 링크가 걸리기 때문에
우리는 어느 지점부터~어느 지점까지 라고 친절하게 좌표를 써넣어야 한다.

위 빨간버튼을 예로 들어보자면 위 버튼은 가로 236px, 세로 32px의 버튼이다.
좌표는 왼쪽 0부터 시작해 오른쪽으로 간다.
좌표는 상단 0부터 시작해 하단으로 간다.
즉 가장 왼쪽상단의 경우 좌표 0,0 이 되며, 가장 오른쪽하단의 경우 좌표 236,32가 된다.
0,0부터 236,32까지의 좌표를 잡으면 가로는 0~236까지, 세로는 0~32까지가 잡히게 된다.
즉 네모 버튼의 모든 영역이 좌표로 잡히게 되는 것이다.

빨간버튼에 링크를 걸어보도록 하겠다.

<img src="https://t1.daumcdn.net/cfile/tistory/192A3B35507BF0D340" border="0", alt="" usemap="#Map">
<map name="Map">
<area shape="rect" coords="0,0,236,32" href="http://ojhh2o.tistory.com/169" target="_blank"> </map>

 

짜잔, 좌표를 설정하여 링크걸기 완료!