https://github.com/clarketm/image-map

Responsive, dynamic image maps.
https://github.com/clarketm/image-map

clickable-areas image-map javascript jquery map responsive-image-map

Last synced: 5 days ago
JSON representation

Responsive, dynamic image maps.

• Host: GitHub
• URL: https://github.com/clarketm/image-map
• Owner: clarketm
• License: apache-2.0
• Created: 2016-08-28T07:11:01.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T01:45:09.000Z (almost 2 years ago)
• Last Synced: 2024-10-03T22:06:11.735Z (about 1 month ago)
• Topics: clickable-areas, image-map, javascript, jquery, map, responsive-image-map
• Language: JavaScript
• Homepage: https://blog.travismclarke.com/project/imagemap/
• Size: 330 KB
• Stars: 126
• Watchers: 5
• Forks: 28
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - clarketm/image-map - Responsive, dynamic image maps. (jquery)

README

        
[![NPM release](https://img.shields.io/npm/v/image-map.svg)](https://www.npmjs.com/package/image-map)

[![Build Status](https://travis-ci.org/clarketm/image-map.svg?branch=master)](https://travis-ci.org/clarketm/image-map)

# [Image-Map](https://www.travismclarke.com/imagemap/)

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

A native JavaScript solution for creating responsive [image-maps](https://en.wikipedia.org/wiki/Image_map) that rerender on image or viewport changes.

### Check out the **[demo](https://www.travismclarke.com/imagemap/)**!

## Installation

### Install with npm

```shell

$ npm install image-map

```

### Install with bower

```shell

$ bower install image-map

```

### [CDN](https://unpkg.com/browse/image-map/dist/)

|                        Module (`.es.js`)                  |                        Main (`.js`)                    |                        Main (compressed) `.min.js`         |

| :-------------------------------------------------------: | :----------------------------------------------------: | :--------------------------------------------------------: |

| [🔗](https://unpkg.com/image-map/dist/image-map.es.js)    | [🔗](https://unpkg.com/image-map/dist/image-map.js)    | [🔗](https://unpkg.com/image-map/dist/image-map.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](https://www.image-map.net/)).

> 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



      

      

      

      

```

### JavaScript

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

```js

// using `import`

import ImageMap from "image-map";

```

```js

// using `require`

var ImageMap = require("image-map");

```

```html

```

Next, simply call the `ImageMap` constructor:

```js

ImageMap('img[usemap]')

```

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

```js

ImageMap('img[usemap]', 500)

```

### jQuery

To use this plugin with jQuery, first include both the [jQuery](https://jquery.com/) and `image-map.jquery.js` libraries:

```html

```

Next, simply call the `imageMap` plugin:

```js

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

```

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

```js

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

```