동적 usemap 을쓰려고하는데 잘안됩니다 ㅠ 조언부탁드릴게요
본문
아래와 같이 작성했는데 화면을 줄이면 링크 네모 칸이 자동으로 안줄어드라구요..
해당내용은 게시판->내용관리에서 추가해서 작업했습니다!
<script src="/js/jquery.rwdImageMaps.min.js" type="text/javascript"></script>
<script src="/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
$(function(){
$('img[usemap]').rwdImageMaps();
$("#c01_main").width("100%");
});
</script>
<div class="c01_wrap">
<img width="100%" height="auto" title="c01_main" src="/img/c01_pc.jpg" usemap="#c01_main">
<map name="c01_main">
<area title="" href="http://naver.com" shape="rect" coords="80,1207,490,1750" target="_self" alt="1">
<area title="" href="http://naver.com" shape="rect" coords="525,1208,932,1750" target="_self" alt="2">
<area title="" href="http://naver.com" shape="rect" coords="970,1205,1381,1750" target="_self" alt="3">
<area title="" href="http://naver.com" shape="rect" coords="1411,1208,1820,1749" target="_self" alt="4">
</map></div>
답변 2
jquery에 의존성을 가지는 스크립트는 jquery보다 나중에 위치해야 합니다.
아래와 같이 스크립트 태그의 위치를 바꿔보십시오.
<script src="/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/js/jquery.rwdImageMaps.min.js" type="text/javascript"></script>
coords 값은 숫자만 되서
이미지가 줄어들때 coords 좌표도 맞게 변경해야할것 같은데요.