간편하게 이미지맵 생성한 후 반응형 적용하기

이미지 맵이란?

 

이미지 맵은 사용자가 이미지의 다른 부분을 클릭하여 다른 목적지로 이동할 수있는 그래픽 이미지입니다. 이미지 맵은 x 및 y 좌표 (왼쪽 상단 모서리 기준)로 각 핫 영역을 정의하여 만들어집니다. 각 좌표 세트를 사용하여 사용자가 영역 내를 클릭 할 때 연결되는 링크를 지정합니다.

 

이미지에 원하는 영역을 설정한 후 링크를 연결해주는 작업을 보통 이미지맵 작업이라고 하는데
간단하게 처리할 수 있는 사이트를 소개합니다.

 

이미지를 업로드 하거나 이미지 URL을 입력한 후 링크걸고자 하는 영역을 지정한 후 생성 버튼을 클릭을 하면 간편하게 HTML 코드가 생성이됩니다.

 

1. 이미지맵 HTML 코드

<img src="test_img.svg" usemap="#image-map">

<map name="image-map">
    <area target="_self" alt="목주름" title="목주름" href="" coords="39,69,136,107" shape="rect">
    <area target="_self" alt="머리숱" title="머리숱" href="" coords="283,0,376,37" shape="rect">
    <area target="_self" alt="팔뚝" title="팔뚝" href="" coords="92,193,2,155" shape="rect">
    <area target="_self" alt="가슴" title="가슴" href="" coords="286,117,376,155" shape="rect">
    <area target="_self" alt="허리/뱃살" title="허리/뱃살" href="" coords="286,185,376,222" shape="rect">
    <area target="_self" alt="다리" title="다리" href="" coords="0,291,91,330" shape="0">
</map>
</div>

 

2. 이미지맵 반응형적용 코드

<script src="jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
	
	$('area').on('click', function() {
		alert($(this).attr('alt') + ' clicked');
	});
});
</script>

 

 

www.image-map.net/

Free Online Image Map Generator

 

github.com/stowball/jQuery-rwdImageMaps

stowball/jQuery-rwdImageMaps