clarketm/image-map

Responsive, dynamic image maps.

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-map

Install with bower

$ bower install image-map

CDN

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 <map> element is associated with the <img>'s usemap 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.

<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);

image-map's Issues

Generating image maps

Thanks for this great plugin! I'm able to easily use it to display pre-made image maps.

I'd like to allow users to generate image maps themselves, by clicking on an image (much like image-map.net). Naturally, that creates the same issues with responsive images. Any idea how to expand this plugin to allow image map generation as well?

import ImageMap from "image-map" not working

module "/Users/my-website/node_modules/image-map/dist/image-map"
Could not find a declaration file for module 'image-map'. '/Users/my-website/node_modules/image-map/dist/image-map.js' implicitly has an 'any' type.
Try npm i --save-dev @types/image-map if it exists or add a new declaration (.d.ts) file containing declare module 'image-map';ts(7016)

Import

Hello, i am working on a Vue project, where i use a image map. I follow the command to install and when i do a
import ImageMap from 'image-map', i receive this message :

Could not find a declaration file for module 'image-map'. 'C:/Users/gerau/OneDrive/Bureau/Stage_LMD_DUT_Informatique/FRONTEND/front_end/node_modules/image-map/dist/image-map.js' implicitly has an 'any' type.

I did test to install @types/image-map and it couldn't be found:

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fimage-map - Not found
npm ERR! 404 '@types/image-map@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

Someone know how I could resolve my problem ?

How can I use this in React JS?

I want to use this in one of my projects, a very useful package indeed. I need to know if we can we use this in React JS, if yes how? Or is there a react version of this package?

I already tried using this in React, it works,but sometimes it fails on browser back button, I cant exactly figure out where to place this code for react components.

Map does not resize properly on IE11

Thanks for the plugin! It's been very helpful. One issue I found is that it does not seem to resize properly for IE11.

1. In IE11, go to: https://www.travismclarke.com/imagemap/
2. Resize window to about 800px wide
3. Click on "Orange" shape & see that "Pink" is selected
4. Also try clicking on top left corner of "Yellow shape" & see blue is selected

Unable to get property fn in Ionic

I tried to use library in Ionic, but I'm receiving error

SCRIPT5007: Unable to get property 'fn' of undefined or null reference
image-map.js (73,5)

Any ideas what could cause that?

How to use in Nuxt.js app.

I want to use image-map plugin in Nuxt.js app.

So I make sample app
https://github.com/dokechin/nuxt-imagemap-example

In the case, image-map page visit second time from nuxt-link.
It not going successfully. (http://localhost:3000/)

In the case image-map page visited at first.
It going successfully.(http://localhost:3000/index2)

How to execute former case?

Map does not resize on Safari

One issue I found is that it does not work in any resolution on Safari.

Performance with lots of areas

Hi there,

I thought I should post it here in case it's useful to anyone.

I noticed when making a whole lot areas this script will slow right down. I fixed it by changing the lines around line 52 to:

					document.querySelectorAll('map[name="' + map + '"] area').forEach(function () {
						var coordsS = this.dataset[c] = this.dataset[c] || this.getAttribute(c),
							coordsA = coordsS.split(','),
							coordsPercent = Array.apply(null, Array(coordsA.length));

						coordsPercent.forEach(function (val, i) {
							coordsPercent[i] = i % 2 === 0 ? Number(((coordsA[i] / w) * 100) * wPercent) : Number(((coordsA[i] / h) * 100) * hPercent);
						});
						this.setAttribute(c, coordsPercent.toString());
					});

I'm not completely sure what effect this has such as if it's compatible with older browsers or whatever but it seems to work and doesn't slow my browser down like before.

your library is working fine on local, it's responsive, but not on production

my website URL
https://nepal-clinics.kraftech.in/

I am using your library, on local it's absolutely fine, but on prod it's just not working, not responsive.

Can you please fix it ?

Responsive and Mapping

Hi, upon using this in ionic. How can I set the mapping to be responsive too? Since different screen size affect the position of the mapping too.

SSL Certificate Expired In Demo

Hey, it's very nice project, but it think your SSL certificate expired in demo. You should check it out.
Have a good day

Highlight region on hover

Is there a way to highlight the areas when we hover? Thanks

responsive not right.

I will Try this. but it not right when I responsive from desk top to mobile.
Please! help me! this is my code!

<style>
  img {
    display: block;
    width: 100%;
    
  }

</style>

<img src="https://minhlong.com/uploads/product/ce5d6f8e142e3a762921c8fe134781f4.jpg" usemap="#image-map">
> <map name="image-map">
>     <area target="_blank" alt="" title="" href="https://minhlong.com/vi/san-pham/chi-tiet/2841/trau-thinh-vuong-25cm-mau-tim-trang-tri-vang-24k.html" coords="0,0,0" shape="circle" data-coords="180,320,34">
>     <area target="_blank" alt="" title="" href="https://minhlong.com/vi/san-pham/chi-tiet/2795/trau-thinh-vuong-25cm-dat-vang.html" coords="0,0,0" shape="circle" data-coords="387,331,36">
>     <area target="" alt="" title="" href="" coords="0" shape="0" data-coords="0">
> </map>

Is there a React Native implementation as well ?

jQuery not listed as dependecy

When I install only image-map module with yarn with:

yarn add image-map

then when importing imageMap it crashes because jQuery is not defined.

There are problems here:

• jQuery should be optional
• if jQuery is absolutely required, then it should be listed as an dependency.

Can you make jQuery optional?

I couldn't find any options to perform a yarn add image-map --with-peer-dependencies` since it doesn't exist.

A little help on debugging (if possible)

Loving the concept and implements OK (coordinates changing with window size as expected). Unfortunately it's not honouring the href tag and providing a link. No errors in the console. Stumped.

Any ideas much appreciated.

Coords "0,0" on page load.

It works with onChange event. I thought it should work with onLoad too. How to deal with it?

Demo link in the docs is not working

The live demo link given in the docs is not working.
https://www.travismclarke.com/imagemap

Not working on google chrome

hello
this package work on firefox very nice but not working on google chrome