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


  • 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:
You may also want to wrap it inside a $(document).ready() function, like so:
$(document).ready(function(e) {


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/ https://github.com/stowball/jQuery-rwdImageMaps

Leave a comment

Scroll to Top