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

출처 : http://noviceany.tistory.com/4

원본 페이지 : https://github.com/stowball/jQuery-rwdImageMaps

jquery.rwdImageMaps.min.js

<style type="text/css">

img[usemap] {

border: none;

height: auto;

max-width: 100%;

width: auto;

}

</style>

<div class="contents">

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

<map name="Map">

<area shape="rect" coords="319,176,637,348" href="#">

<area shape="circle" coords="80.50.3" href="#">

<area shape="poly" coords="12,2,640,174,213,2,426,174" href="#">

</map>

</div>

처음에 이미지의 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>