Image-Map
A native JavaScript solution for creating responsive image-maps that rerender on image or viewport changes.
demo!
Check out theInstallation
Install with npm
$ npm install image-map
Install with bower
$ bower install image-map
CDN
Module (.es.js ) |
Main (.js ) |
Main (compressed) .min.js |
---|---|---|
🔗 | 🔗 | 🔗 |
html
Generating the image map You can generate image maps using this wonderful online tool: https://www.image-map.net/. It works for both local and web images.
Usage
Add an image-map to your html page (either create one yourself or try the online image map generator).
An image-map is an image with clickable areas. The required
name
attribute of the<map>
element is associated with the<img>
'susemap
attribute and creates a relationship between the image and the map. The<map>
element contains a number of<area>
elements, that defines the clickable areas in the image map.
JavaScript
To use this plugin with only JavaScript, first include (or import) the image-map.js
library:
// using `import`;
// using `require`var ImageMap = ;
<!-- using `script` -->
Next, simply call the ImageMap
constructor:
The default debounce rate is 500ms. To customize this value, pass a numeric wait value as the second argument.
jQuery
To use this plugin with jQuery, first include both the jQuery and image-map.jquery.js
libraries:
<!-- using `script` -->
Next, simply call the imageMap
plugin:
;
The default debounce rate is 500ms. To customize this value, pass a numeric wait value as the first argument.
;