Skip to content
Switch branches/tags

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) 2016 Matt Stow
Licensed under the MIT license (see LICENSE for details)
Minified version created with Online YUI Compressor: