/jQuery-rwdImageMaps

Responsive Image Maps jQuery Plugin

Primary LanguageJavaScriptMIT LicenseMIT

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

Copyright (c) 2012 Matt Stow
Licensed under the MIT license (see LICENSE for details)
Minified version created with Online YUI Compressor: http://www.refresh-sf.com/yui/