jMap v1.0

Auto Image Map Resizer | jQuery Plugin

How It Works

Resizes image maps in a responsive HTML layout by recalculating the map's area coordinates to match the image's display dimensions.

New coords are calculated based on the image's original width and height.

jMap also listens for the window resize event and recalculates image maps accordingly.

Orignal code was borrowed from the plugin jQuery RWD Image Maps currently available on github but given a few improvements. Most importantly jMap works on all devices including ios (rwdImageMaps had some problems with ios).


Apply to all images on the page with a usemap attribute


Apply to specific image


You may also include the width and height attributes image tags (these can be overriden in CSS) but this is optional and not necessary.

For example, if your image's orignal width is 500px and the original height is 600px, you can do something like this:

<img width="500" height="600" style="width:100%;" src="/my/really/cool-img.jpg" />
responsive website design


Try resizing this window and clicking a color in the image to the left/below.

jmap demo image Red Square Blue Square


<map name="demo-map">
     <area coords="0,0,391,490" href="#red" />
     <area coords="0,491,391,799" href="#blue" />


<script src="jquery.jmap.min.js"></script>