[Javascript] Image Responsive Map Plugin

HTML 코딩에서 Image 특정 위치에 특별한 이벤트를 주려고 하는 경우 Map 태그를 많이 이용합니다.

 

다만 Map 의 경우 coord값으로 위치를 확인하는데 image에서의 좌표값이 고정이므로 반응형 홈페이지에서 이미지 크기가 유동적으로 변할 경우에 문제가 됩니다.

 

그렇다 보니 Image Map 좌표 값을 처리해주는 Plugin을 만들어 사용하게 되었는데,

많이 이용했던 플러그인으로는 jQuery-rwdImageMaps 가 있습니다.

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

 

다만 이 플러그인은 약 4년전이 마지막으로 업데이트가 이루어진 플러그인이라 현 최신 브라우저에서는 작동하다가 정상적으로 작동하지 않는 경우가 발생하기도합니다.

 

아니면 동작하다가 어느날 갑자기 동작이 안되는 경우도 존재하구요.

다만 특별한 문제가 없다면 현재까지도 정상적으로 작동하여 아직도 많이 사용되는 플러그인입니다.

 

그러나 지금 제가 소개할 플러그인은 Image Map resizer 라는 플러그인입니다.

작년까지 업데이트가 이루어졌던 것으로 확인되는 플러그인입니다.

 

사용법은 rwd와 마찬가지로 간단합니다.

Github 링크는 https://github.com/davidjbradshaw/image-map-resizer 입니다.

 

예시는 http://davidjbradshaw.com/imagemap-resizer/example/여기서 확인하실 수 있습니다.

 

워드프래스 라이브러리 추가하여 사용하는 것도 제공하니 사용할일이 있다면 확인해보시는 것도 좋을 겁니다.

 

사용법

$('map').imageMapResize();

or

$(document).ready(function() {
    $('map').imageMapResize();
});

 

Example

http://davidjbradshaw.com/imagemap-resizer/example/

WordPress

There is a port of this library to WordPress made by @iankevinmcdonald https://wordpress.org/plugins/add-image-maps/

IE8 Support

Version 1.0 of this project is optimised for IE9 and above. If you still require support for IE8 then please use V0.6.x. Both versions are functionally equivalent.