HTML 이미지맵 (image map) 좌표 링크 설정 방법

하나의 이미지내에서 좌표를 설정하여 링크를 설정하기 위해서는 이미지맵(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 : 새창에서)

 

 

좌표는 어떻게 알아낼 수 있을까?

대단한 툴이 아니더라도 윈도우에 탑재되어있는 그림판을 통해 손쉽게 좌표값을 얻을 수 있다, 우선 그림판을 실행하여 좌표를 구할 이미지를 띄우도록 하자.

예를들어 설명하도록 하겠다, 위의 네모칸부분의 좌표를 구하고 싶을 때, 시작점에 마우스를 가져다 대도록 하자

 

 

위의 이미지에 마우스를 가르키면 이미지에 해당하는 좌표값이, 나오게된다, 위의 좌표 값을 메모해 둔뒤 그다음 끝점으로 이동하여 좌표를 알아내도록 하자.

 

자 위와같이 좌표값이 나왔다면 좌표의 값은 2,3,167,170 이 되겠다.

 

모바일같이 반응형 화면에 사용되려면 이미지가 100%로 변경해주어야 한다 아래의 블로그를 통해 자바스크립트를 확인하도록 하자.

crone.tistory.com/310

HTML 이미지맵 반응형 적용 방법