반응형 또는 모바일 페이지에 이미지맵(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

 

 

출처 https://github.com/stowball/jQuery-rwdImageMaps