Image-Map
A native JavaScript solution for creating responsive image-maps that rerender on image or viewport changes.
Check out the demo!
Installation
Install with npm
$ npm install image-mapInstall with bower
$ bower install image-mapCDN
Module (.es.js) |
Main (.js) |
Main (compressed) .min.js |
|---|---|---|
| 🔗 | 🔗 | 🔗 |
Generating the image map html
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
nameattribute of the<map>element is associated with the<img>'susemapattribute 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.
<img usemap="#image-map" src="/path/to/image">
<map name="image-map">
<area shape="poly" coords="22,22,231,22,264,82,232,143,22,143">
<area shape="poly" coords="233,22,443,22,476,82,442,144,233,143,264,82">
<area shape="poly" coords="445,22,654,22,686,81,654,143,444,143,475,82">
<area shape="poly" coords="655,22,895,22,895,142,655,142,684,82">
</map>JavaScript
To use this plugin with only JavaScript, first include (or import) the image-map.js library:
// using `import`
import ImageMap from "image-map";// using `require`
var ImageMap = require("image-map");<!-- using `script` -->
<script src="https://unpkg.com/image-map/dist/image-map.js"></script>Next, simply call the ImageMap constructor:
ImageMap('img[usemap]')The default debounce rate is 500ms. To customize this value, pass a numeric wait value as the second argument.
ImageMap('img[usemap]', 500)jQuery
To use this plugin with jQuery, first include both the jQuery and image-map.jquery.js libraries:
<!-- using `script` -->
<script src="https://unpkg.com/jquery/dist/jquery.js"></script>
<script src="https://unpkg.com/image-map/dist/image-map.jquery.js"></script>Next, simply call the imageMap plugin:
$('img[usemap]').imageMap();The default debounce rate is 500ms. To customize this value, pass a numeric wait value as the first argument.
$('img[usemap]').imageMap(500);