[Jquery] Image Map 반응형 시 좌표 잡는 JS라이브러리::RWD Image Maps

Image Map 사용시 편리하시만 반응형 작업시 다 망가지는데요.

이를 방지하기위해 사용하는 제이쿼리 라이브러리 소스입니다.

RWD Image Maps 라이브러리 주소 :  https://github.com/stowball/jQuery-rwdImageMaps

stowball/jQuery-rwdImageMaps

아래와 같이 적용만해주면 바로 작동 됩니다.

HTML

<script src="jquery.rwdImageMaps.min.js"></script><!--img-map 반응형소스-->

<div>
<img id="Image-Maps-Com-image-maps-2020-03-06-044647" src="img/test.jpg" alt="test" border="0" width="497" orgwidth="497" orgheight="820" usemap="#image-maps-2020-03-06-044647">
<map name="image-maps-2020-03-06-044647" id="ImageMapsCom-image-maps-2020-03-06-044647">
	<area alt="" title="test" href="test" shape="rect" coords="90,416,254,442" style="outline:none;" target="_blank">
</map>
</div>

JS

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