Html Img Map 동적으로 적용하기 (Using rwdImageMaps.js in jQuery)

반응형웹에서 이미지맵을 사용할 경우, 웹 환경에 맞춰져있는 이미지 좌표값이

화면의 크기나 이미지가 동적으로 변하는 모바일에서는 맞지 않는 경우가 발생한다.

이럴 경우 사용하는 rwdImageMaps.js

실제 이미지 크기와 일치하도록 영역 좌표를 다시 계산하여 반응 형 디자인에서 이미지 맵을 사용할 수 있다.

플러그인 링크 : https://github.com/stowball/jQuery-rwdImageMaps

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

이렇게만 해주면 알아서 쫘란짠짠..

-----------------------------------------------------------------------------------------------------------------------------------------

밑에는 해당 js 에 대해 설명해놓은 글 

처음에 이미지의 width값과 height값을 입력해 줘야 한다.
처음에 페이지가 로딩 될 때 이미지의 width, height값이 입력되어야 rwdImageMaps.js에서 이미지 사이즈가 변경 될 시 map의 좌표값을 동적으로 지정해 줄 수 있다.

<img src="${imgUrl}" usemap="#Map" width="${width}" height="${height}">

아래와 같이 img[usemap] 으로 css를 설정하게 되면

 일일이 찾아다니며 기본으로 이미지 태그에 설정되는 border를 없애는 수고를 덜 수 있다.
img태그 중에 usemap 속성을 사용한 img태그에만 css가 적용이 됩니다.

<style type="text/css">

img[usemap] {

border: none;

height: auto;

max-width: 100%;

width: auto;

}

</style>

jquery와 jquery.rwdImageMaps.min.js를 import 하고 

페이지가 호출 될때 $('img[usemap]').rwdImageMaps() 로 실행 시켜 줍니다. 

 이미지 사이즈가 전체 화면 크기보다 작을 경우를 대비해서 

$("#img").width("100%") 를 적용하면 이미지 비율대로 가로 사이즈가 화면에 꽉 차도록 보이게 할 수 있습니다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>

<script>

$(function(){

$('img[usemap]').rwdImageMaps();

$("#img").width("100%");

});

</script>

출처: http://noviceany.tistory.com/4 [novice in anything]