![NPM release](https://www.npmjs.com/package/image-map)
![Build Status](https://travis-ci.org/clarketm/image-map)

Image-Map

![image-map](https://www.travismclarke.com/imagemap/)

A native JavaScript solution for creating responsive image-maps that rerender on image or viewport changes.

$3

Installation

$3

shell
$ npm install image-map

$3

shell
$ bower install image-map


$3

|                        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

name attribute of the element is associated with the 's usemap attribute and creates a relationship between the image and the map. The element contains a number of elements, that defines the clickable areas in the image map.

`html

`$3`

To use this plugin with only JavaScript, first include (or import) the image-map.js library:

`js // usingimportimport ImageMap from "image-map";`

`js // usingrequirevar ImageMap = require("image-map");`

`html`

Next, simply call the ImageMap constructor:

`js ImageMap('img[usemap]')`

The default debounce rate is 500ms. To customize this value, pass a numeric wait value as the second argument.

`js ImageMap('img[usemap]', 500)`

`$3`

To use this plugin with jQuery, first include both the jQuery and image-map.jquery.js libraries:

`html`

Next, simply call the imageMap plugin:

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

The default debounce rate is 500ms. To customize this value, pass a numeric wait value as the first argument.`js $('img[usemap]').imageMap(500);``

Installation

shell
$ npm install image-map

$3

shell
$ bower install image-map

$3

| Module (

) | Main (

) | Main (compressed)

|
| :-------------------------------------------------------: | :----------------------------------------------------: | :--------------------------------------------------------: |
| 🔗 | 🔗 | 🔗 |

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

attribute of the

element is associated with the 's usemap attribute and creates a relationship between the image and the map. The element contains a number of elements, that defines the clickable areas in the image map.

`html

`$3`

To use this plugin with only JavaScript, first include (or import) the image-map.js library:

`js // usingimportimport ImageMap from "image-map";`

`js // usingrequirevar ImageMap = require("image-map");`

`html`

Next, simply call the ImageMap constructor:

`js ImageMap('img[usemap]')`

The default debounce rate is 500ms. To customize this value, pass a numeric wait value as the second argument.

`js ImageMap('img[usemap]', 500)`

`$3`

To use this plugin with jQuery, first include both the jQuery and image-map.jquery.js libraries:

`html`

Next, simply call the imageMap plugin:

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

The default debounce rate is 500ms. To customize this value, pass a numeric wait value as the first argument.`js $('img[usemap]').imageMap(500);``

image-map

Image-Map

$3

Installation

$3

$3

$3

Generating the image map html

Usage

$3

$3

image-map

Image-Map

$3

Installation

$3

$3

$3

Generating the image map html

Usage

$3

$3

`Generating the image map` html

`$3`

`$3`

`Generating the image map` html

`$3`

`$3`