[javascript/jquery] 이미지 맵태그 반응형 적용방법

[javascript/jquery] 이미지 맵태그 반응형 적용방법

 

html 이미지안에

 

버튼을 클릭되게 하기 위해서는

 

맵태그를 사용해야 합니다!

 

반응형으로 구현하려면 여간 까다로운게 아닌데요!

 

반응형으로 맵태그를 지원하는 jquery 가 있어서 공유해보려고 합니다.

 

 

예를들어

 

아래와 같이 이미지와 맵이 있다고 가정하고,

<img id="id_map_img" src="IMG_SRC" alt="" usemap="#usemap_id">
<map name="usemap_id">
    <area shape="rect" coords="763,2073,1398,2240" href="LINK_URL" target="_blank">
</map>

 

이걸 반응형으로도 동작하게 하려면

 

아래와 같이 스크립트를 추가하시면 됩니다!

    <script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
    <script>
        $(function(){
            $('#id_map_img').rwdImageMaps();
        });
    </script>

 

참고들 하세요!