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).


Usage

Apply to all images on the page with a usemap attribute


$(window).load(function(){
     $("img[usemap]").jMap();
});
                        

Apply to specific image


$(window).load(function(){
     $("img.slide-1").jMap();
});
                        

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

Demo

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

jmap demo image Red Square Blue Square

HTML


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

JavaScript


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

$(window).load(function(){
     $("img[usemap]").jMap();
});