이미지맵 활용하기

이미지에 링크를 연결할 때 a태그를 사용하면 되는데, 이때 이미지 하나에 여러 링크를 연결할 때에는 이미지맵인 map 태그를 사용한다. 이미지 하나를 여러 구역으로 분할하여 각각의 영역에 독립된 링크를 연결할 수 있는 HTML5 태그이다.

 

map 태그로 하나 이미지에 여러 링크 달기

CONTENTS

 

이미지맵이란?

이미지맵을 구현하는 map태그는 하나의 이미지 안에 여러 개 링크를 연결할 수 있게 하는 HTML5태그이다. 기본적으로 img 태그와 map 태그를 활용하여 area 태그에 좌표를 지정하여 링크할 구역을 만든다. 

 

이미지맵 기본 코드

 

위에 코드는 picture 태그를 살펴볼 때 마지막 단락에서 잠깐 언급한 내용이다. 이처럼 img 태그에 사용할 이미지 소스를 연결한다. 이때 usemap 속성 부분에서 속성값에 반드시 샵(#)을 붙여야 한다. 이 속성값은 아래 map 태그의 name 속성값과 반드시 일치해야 한다. 바로 이것이 이미지맵 사용에 있어 가장 중요한 규칙이다.

 

img 태그의 usemap 속성값과 map 태그의 name 속성값을 일치시켜 동기화한다.

 

map 태그

이미지맵을 구현하는데 핵심은 map 태그에 있다. map 태그의 name 속성은 단순히 img 태그에 담긴 소스와 동기화하는 역할만 한다. 실질적으로 하나의 이미지에 분할된 영역을 확보하는 것은 area 태그 역할이다. 현재 위에 예시 코드에는 map 태그 안에 area 태그가 3개 들어있다. 즉, 하나의 이미지를 3개 영역으로 나누었다고 생각하면 된다.

 

area 태그 안에는 다양한 속성이 들어올 수 있다. 이중 가장 핵심이 되는 속성이 shape와 coords이다. shape는 단어 그대로 영역 모양을 알려준다. coords는 하나의 이미지 안에 현재 영역이 위치한 좌표값을 의미한다. 즉, area 태그로 영역을 분할한 후에 shape 속성으로 모양을 설정하고 coord 속성으로 좌표값을 지정한 후에 href 속성으로 링크를 연결하는 방식이다. 

 

area 태그

img 태그와 map태그로 이미지맵을 구현하는 전체 구조를 살펴봤다. 실질적으로 이미지맵을 구현한다고 볼 수 있는 area 태그를 자세히 살펴본다. 

 

area 태그 구조

 

map 태그 안에 담기는 area 태그만 위에 이미지로 따로 담았다. 우선 area 태그에 속성으로 들어가는 shape를 활용해서 다양한 형태로 영역을 설정할 수 있다. 가장 많이 사용하는 속성값으로 직사각형 영역을 정의하는 rect이 있다. 대부분 이 rect 속성값만 사용해도 충분해다. 여기에 원형 영역을 정의하는 circle 속성값도 활용도가 높은 편에 속한다. 이외에 다각형 영역을 정의하는 poly, 영역을 분할하지 않은 이미지 전체 지역을 정의하는 default 속성값도 존재한다. 

 

예시 이미지

 

위에 예시 이미지처럼 컴퓨터는 사각형이므로 rect 속성값을 핸드폰도 사각형이므로 rect 속성값을 커피잔은 원형이므로 circle 속성값을 area 태그 내에 shape 속성에 넣으면 된다. 여기까지도 고정된 코딩 구조이므로 별다른 어려움이 없다. 하지만 area 태그로 분할한 영역 좌표값을 담는 coords 속성 사용에 약간의 어려움이 존재한다. 이유는 단순히 이미지를 그림판이나 포토샵으로 불러와 좌표값을 담으면, 디바이스 플랫폼에 따라 반응형으로 보여지는 이미지에서 좌표값이 왜곡될 수 있기 때문이다. 그렇다보니 최초 좌표값에 링크한 url이 의도하지 않은 영역에 연결되는 현상을 초래할 수 있다.

 

좌표를 설정하는 coords 속성

우선 반응형에 적용하는 이미지맵 좌표는 자바스크립트를 사용해야 한다는 정도만 언급하고, coords 좌표를 찾는 방법을 살펴본다. 이미지에서 area 속성으로 구분한 영역 좌표인 coords을 찾으면, 후에 자바스크립트가 아니라도 플러그인만 추가하면 되므로, 반응형에 적용하는 이미지맵도 coords 좌표를 찾는 작업은 필수이다.

 

 

rect 속성값 coords 좌표 찾기 

 

coords 속성값인 좌표 찾기는 W3 Schools 이미지를 그대로 활용했다. 위 이미지에서 보듯이 컴퓨터 영역에서 상단과 하단 좌표만을 구하면 된다. 즉, 사각형인 rect 속성값은 좌상점과 우하점만으로 사각형을 그릴 수 있으므로, 이 두 좌표만 알면 된다. 이 좌표는 그림판이나 포토샵으로 이미지를 불러오면 어렵지 않게 확인이 가능하다.

 

circle 속성값 coords 좌표 찾기

 

area 태그 내 sahpe 속성값이 circle, 즉 원형으로 영역을 분할한 경우에는 중심좌표와 반지름을 구해 coords 속성값에 넣는다. 중심좌표는 원의 가운데에 마우스를 가져다되면 x,y 좌표가 나오고 그 중심에서 우측 끝으로 마우스를 가져다된 후에 동일한 y좌표에 변한 X좌표를 활용해 즉, X - x로 반지름을 찾을 수 있다.

 

사각형은 좌표값이 4개이고 원형은 좌표값이 3개뿐이다.    

 

여기에서는 다각형인 poly까지는 살펴보지 않겠지만, 기본적으로 다각형은 각각 꺽이는 모서리 좌표(x,y)들을 전부 찾아서 coords 속성값에 넣으면 된다. 5각형이면 좌표값은 10개, 7각형이면 좌표값은 14개 되는 식이다.

 

참고로 이미지맵을 구현하려고 각각의 영역 좌표를 찾는 게 번거로울 수 있다. 이때 이미맵 코드까지 한 번에 생성해주는 이미지맵 제너레이터를 사용하면 편하게 작업할 수 있다.

 

 

Free Online Image Map Generator

 

이미지맵 제너레이터 사용 방법은 어렵지 않지만, 처음에는 무엇을 해야 할 지 감이 잡히지 않는다. 다행히 이미지맵 제너레이터 사용 방법을 실제로 구현한 유튜브 영상이 첨부한다. 소리는 없이 영상만으로 사용 방법을 알려주고 있는데, 3분 남짓한 영상으로 중요한 포인트를 잘 짚어주고 있다.

 

 

 

반응형 이미지맵 구현하기

 

위에서 img 태그 안에 map 태그를 넣은 후, map 태그 안에 area 속성과 coords 속성 그리고 href 속성으로 하나의 이미지를 여러 영역으로 구분한 후에 링크를 연결하는 방법을 자세히 살펴보았다. 하지만 이렇게 작성한 코드가 디바이스 플랫폼에 따라 이미지 크기나 좌표가 변하므로 의도한 대로 이미지맵 효과를 볼 수 없을 수도 있다.

 

물론 최근에는 대부분 디바이스 플랫폼이 알아서 이미지맵을 구현해주지만, 여전히 100% 완벽하지는 않다. 따라서 이때 플러그인을 활용하면 100% 완벽하게 모든 디바이스 플랫폼에서 의도한대로 이미지맵 효과를 구현할 수 있다.

 

반응형 이미지맵을 위한 플러그인은 다양하게 많으므로 검색으로 찾으면 된다. 여기에서는 제이쿼리로 제작한 플러그인을 소개한다. 깃허브에 올라온 jQuery RWD Image Maps 플러그인을 다운로드한 후에 연결하거나, CDN 방식으로 연결하면 된다. 원본 깃허브 주소는 아래와 같다. 

 

 

https://github.com/stowball/jQuery-rwdImageMaps

 

GitHub - stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin

 

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script>

이건 제이쿼리를 실행하는 플러그인이다. 아래가 반응형 이미지맵을 위한 플러그인이다.

 

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"> </script> 

 

이때 사이트에서 제이쿼리를 실행할 수 있는 플러그인을 위에 연결해주어야 한다.

 

 

이후 이미지맵을 사용한 코드 끝 부분에 아래 스크립트를 추가하면 된다.

 

 

$('img[usemap]').rwdImageMaps();

또는 아래 코드로...
// 그냥 아래 코드 하나만 사용한다고 생각하면 편하다.

$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});

 

이때 반응형 이미지맵이 제대로 구현하지 않을 때는 img 태그에 크기가 설정되어 있는지, 반드시 체크해야 한다. 원본 이미지를 담은 img 태그에 크기를 설정하지 않으면 반응형 이미지맵 플러그인이 제대로 구현하지 못 한다. 따라서 아래 처럼 img 태그에 넓이와 높이를 반드시 지정해야 한다.

 

<img src="..." width="600" height="400">

 

 

즉, 코드가 끝나는 </body>  태그 바로 앞에 제이쿼리 플러그인, 반응형이미지맵플러그인, 이미지맵코드를 순서대로 넣으면 된다. 

 

<div>
 <img ...
 <map ...
</div>
  // 위에 이미지맵 코드 
  // 아래 플러그인 및 스크립트

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>

<script>
   $(document).ready(function() {
	   $('img[usemap]').rwdImageMaps();
   });
 </script>