728x90
반응형
Responsive Image Maps jQuery Plugin
Responsive Image Maps jQuery Plugin Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize. Download the plugin from github This image map was created in minutes wi
mattstow.com
반응형 이미지에서도 이미지맵이 가능하도록 해주는 플러그인입니다.
1. <head> </head> 태그 안에 제이쿼리와 플러그인을 불러옵니다.
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
2. HTML
<img src="이미지경로" alt="" usemap="#map" id="img_map" />
<map name="map">
<area shape="rect" coords="10,10,50,50" href="링크경로" />
</map>
3. jQuery
<script type="text/javascript">
$(function(){
$('img[usemap]').rwdImageMaps();
$("#img_map").width("100%");
});
</script>
728x90
반응형