이미지맵 좌표 유동적으로 적용하기

이미지맵을 사용하다보면 모바일 기기별 혹은 PC 해상도 별 이미지 사이즈가 달라지는 경우에 설정한 좌표값이 어긋나는 경우가 종종 있습니다.

rwdImageMaps 라이브러리를 사용하면 이런 고민을 간단하게 해결할 수 있습니다.(이 라이브러리를 쓰기 위해 JQuery 라이브러리가 필요합니다.)

rwdImageMaps 라이브러리 Github : https://github.com/stowball/jQuery-rwdImageMaps

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script> 
 
<!-- 이미지맵 시작 -->
<img src="..." usemap="#imgmap1" />
<map id="imgmap1" name="imgmap1">
    <area shape="rect" coords="21,7180,706,7430" ... />
    <area shape="rect" coords="34,7466,703,7714" ... />
    <area shape="rect" coords="31,7750,713,8003" ... />
</map>
<!-- 이미지맵 끝 -->
 
<script type="text/javascript">
    // rwdImageMaps로 이미지맵 동적 할당하도록 설정
    $('img[usemap]').rwdImageMaps();
</script>

이렇게 설정하면 간단하게 이미지맵 좌표를 사이즈에 맞게 유동적으로 적용할 수 있게 됩니다.