项目作者: clarketm

项目描述 :
Responsive, dynamic image maps.
高级语言: JavaScript
项目地址: git://github.com/clarketm/image-map.git
创建时间: 2016-08-28T07:11:01Z
项目社区:https://github.com/clarketm/image-map

开源协议:Apache License 2.0

下载


NPM release
Build Status

Image-Map

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

  1. $ npm install image-map

Install with bower

  1. $ 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.

  1. <img usemap="#image-map" src="/path/to/image">
  2. <map name="image-map">
  3. <area shape="poly" coords="22,22,231,22,264,82,232,143,22,143">
  4. <area shape="poly" coords="233,22,443,22,476,82,442,144,233,143,264,82">
  5. <area shape="poly" coords="445,22,654,22,686,81,654,143,444,143,475,82">
  6. <area shape="poly" coords="655,22,895,22,895,142,655,142,684,82">
  7. </map>

JavaScript

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

  1. // using `import`
  2. import ImageMap from "image-map";
  1. // using `require`
  2. var ImageMap = require("image-map");
  1. <!-- using `script` -->
  2. <script src="https://unpkg.com/image-map/dist/image-map.js"></script>

Next, simply call the ImageMap constructor:

  1. ImageMap('img[usemap]')

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

  1. ImageMap('img[usemap]', 500)

jQuery

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

  1. <!-- using `script` -->
  2. <script src="https://unpkg.com/jquery/dist/jquery.js"></script>
  3. <script src="https://unpkg.com/image-map/dist/image-map.jquery.js"></script>

Next, simply call the imageMap plugin:

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

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

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