[HTML] 이미지 맵(image map) 사용하기

 

 

공부했던 자료 정리하는 용도입니다.

재배포, 수정하지 마세요.

 

 

image map을 사용하면 하나의 이미지에 여러 개의 링크를 연결할 수 있다.

 

기본문서에 이미지 추가

먼저 기본 페이지 형식에 <img>로 이미지를 추가한다.

(이때 해당 페이지와 image file이 같은 폴더에 있어야 파일 이름만으로 불러올 수 있다.)

 

 

 

 

웹 페이지에 이미지만 추가한 상태

현재는 기본 이미지만 추가된 상태이다.

해당 이미지에서 강아지 부분을 클릭했을 때는 유기견 분양 페이지로,

고양이 부분을 클릭했을 때는 유기묘 분양 페이지로 가고 싶다면 image map을 사용하면 된다.

 

 

 

 

이미지 태그 선언

먼저, <img>에서 usemap 속성을 사용하여 image map의 이름을 지어주고,

<map>에서 name 속성을 이용, 이미지와 image map을 연결한다.

 

 

 

 

그런 다음 이미지의 좌표를 알아내야 한다.

그림판이나 각종 사이트를 통해 알아내면 된다.

그림판을 기준으로 Ctrl + R을 누르거나, 보기 -> 눈금자 체크를 하면 마우스 커서의 좌표를 알아낼 수 있다.

 

그림판 좌표

이런 식으로 왼쪽 아래에 좌표가 나온다.

영역을 사각형으로 할 것이기 때문에

좌표의 왼쪽 위 시작 좌표와 오른쪽 밑 끝 좌표를 알아내면 된다.

 

 

 

 

image map의 기타 설정

그다음 <map>과 </map>사이에 <area>와 기타 속성을 넣어주면 된다.

<area shap="rect" coords="x좌표, y좌표, x좌표, y좌표" href="연결할 사이트나 페이지의 주소" target="속성 값">

 

shape 속성 : 링크를 연결할 구역의 모양,

coords 속성 :  (시작좌표의) x좌표, (시작좌표의) y좌표, (끝 좌표의) x좌표, (끝 좌표의) y좌표를 차례로 입력한다.

href 속성 : 연결할 페이지의 이름이나 사이트 주소

target 속성 : 링크를 연결할 때 옵션(_blank는 새로운 tab에서 열리도록 설정하는 속성 값)

 

 

 

 

강아지 부분 영역

그러면 강아지 부분 영역을 클릭하면 새 탭에서 유기견 사이트가 나오고,

 

 

 

고양이 부분 영역

고양이 부분 영역을 클릭하면 유기묘 사이트가 나온다.