Responsive Image Maps jQuery Plugin
JavaScript
Switch branches/tags
Nothing to show
Pull request Compare This branch is 2 commits ahead, 3 commits behind stowball:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE
README.md
jquery.rwdImageMaps.js
jquery.rwdImageMaps.min.js

README.md

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/