jQuery Plugin For Responsive Image Maps - image-map.js

image-map.js is a responsive image map plugin for jQuery which makes clickable areas within the image map auto resize depending on the current viewport size.

Licensed under the Apache-2.0.

Installation:

# NPM
npm install image-map

# Bower
bower install image-map

See Also:

• Dynamic Responsive Image Map Generator With jQuery - imageMaps.js
• Fully Responsive Image Maps In jQuery - rwdImageMaps.js

How to use it:

1. Embed an image into the webpage and then create your own clickable areas using area element as shown below:

<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="http://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" >
</map>

2. Load jQuery library (Slim build is recommended) and the jQuery image-map.js script at the end of your html document.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="image-map.js"></script>

3. Initialize the plugin and we're done.

$('img[usemap]').imageMap();

4. You're also allowed implement the image-map.js library in vanilla JavaScript:

ImageMap('img[usemap]');

Changelog:

2020-07-19

• v2.0.1: cleanup/simplify "handleImageLoad" logic

2019-04-17

• v2.0.0 - Fixed yarn

2019-09-27

• v1.1.7 - add support for IE 9, 10, and 11

2019-06-09

• v1.1.6 - Upgrade vulnerable dependencies

2018-12-15

• v1.1.5 - fixed coords "0,0" on page load.

2018-10-25

• v1.1.4 - remove unnecessary codes

2018-10-19

• v1.1.3 - reduce bundle size by optimizing imports

2018-10-18

• v1.0.9: make an explicit check that $ is defined

2017-11-11

• v1.0.7: js update

2017-06-20

• v1.0.6: compatibility with default ES6 import

2017-05-23

• v1.0.5: fix UMD module syntax and export

---

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