Fully Responsive Image Maps In jQuery - rwdImageMaps.js

An image map works by linking individual areas within an image to unique destinations. It's the perfect solution for adding interactivity to a static graphic or photo. The downside with image maps is that when you change the size of your browser window, the pixel coordinates need to update too. That's where the rwdImageMaps.js plugin comes in.

rwdImageMaps.js is a lightweight jQuery plugin for creating fully responsive image maps across all devices & browsers. It automatically recalculates and updates the coordinates of image maps based on the original image dimensions and the size of the current browser window.

See Also:

• Dynamic Responsive Image Map Generator With jQuery - imageMaps.js
• jQuery Plugin For Responsive Image Maps - image-map.js

How to use it:

1. Add image maps to your image.

<img src="example.jpg" alt="Example" usemap="#workmap">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="#">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="#">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="#">
  ...
</map>

2. Make the image responsive by setting the height to 100%.

img[usemap] {
  border: 0;
  height: auto;
  max-width: 100%;
  width: auto;
}

3. Load the rwdImageMaps.js jQuery plugin in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/jquery.rwdImageMaps.min.js"></script>

4. Initialize the plugin on the image. That's it.

$(document).ready(function(e) {
  $('img[usemap]').rwdImageMaps();
  // do something here
  $('area').on('click', function() {
    alert($(this).attr('alt') + ' clicked');
  });
});

---

This awesome jQuery plugin is developed by stowball. For more Advanced Usages, please check the demo page or visit the official website.