반응형 또는 모바일 페이지에 이미지맵(image map) 사용하기
이미지맵을 사용하여 홈페이지를 제작하는대 반응형으로 coding 하는경우 문제가 생깁니다.
원하는 영역의 크기가 변하기때문이죠.
이럴때 jquery 를 이용해서 해결 할 수 있습니다.
jQuery RWD Image Maps
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
Usage:•If possible, add correct, unitless width and height attributes to your image map images. You can override these in CSS to make them responsive.
•Add a link to jQuery in your page, preferably at the bottom just before the closing </body>
•After jQuery, either in a <script> block or a separate file, call:
$('img[usemap]').rwdImageMaps();
You may also want to wrap it inside a $(document).ready() function, like so:
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
Demo:
http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html