Simple jQuery Plugin For Highlighting Image Map - Maphilight

Maphilight is a simple jQuery plugin that allows you to add visual highlights to image maps using canvas or VML (For MS IE). 

It applies to images with a 'usemap' attribute, and outlines the areas defined in their map on mouseover.  

Not only maps, with this plugin you can mark any picture to make it interactive with highlights.

Basic Usage:

1. Include jQuery library and jQuery Maphilight on the web page

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.maphilight.min.js"></script>

2. Insert a Free United States Map generated from "Map of USA with state names.svg".

3. Call the plugin with default options.

$('.map').maphilight();

4. Config the plugin with the following options.

$('.map').maphilight({

  // fill the shape
  fill: true,

  // fill color
  fillColor: '000000',

  // fill opacity
  fillOpacity: 0.2,

  // outline the shape
  stroke: true,

  // stroke color
  strokeColor: 'ff0000',

  // stroke opacity
  strokeOpacity: 1,

  // stroke width
  strokeWidth: 1,

  // fade in the shapes on mouseover
  fade: true,

  // always show the hilighted areas
  alwaysOn: false,

  // never show the hilighted areas
  neverOn: false,

  // The name of an attribute to group areas by, or a selector for elements in the map to group. 
  // Or an array of the same
  // If this is present then all areas in the map which have the same attribute value as the hovered area will hilight as well
  groupBy: false,

  // If true, applies the class on the <img> to the wrapper div maphilight created.
  // If a string, that string is used as a class on the wrapper div.
  wrapClass: true,
  
  // apply a shadow to the shape
  shadow: false,
  shadowX: 0,
  shadowY: 0,
  shadowRadius: 6,
  shadowColor: '000000',
  shadowOpacity: 0.8,
  // Can be 'outside', 'inside', or 'both'.
  shadowPosition: 'outside',
  // Can be 'stroke' or 'fill'
  shadowFrom: false,
  
});

Changelog:

v1.4.2 (2021-05-31)

• groupBy can take an array. Comply with the shape spec better. Fixes for sizing of scaled images.

2020-07-21

• JS updated

v1.4.0 (2019-05-26)

• Conform with shape spec

2018-03-01

• Fixed: The .bind event list shouldn't contain commas

2018-03-01

• Fixed: The .bind event list shouldn't contain commas

2016-06-12

• updated js to use jquery 3.0

2015-10-22

• JS update.

---

This awesome jQuery plugin is developed by kemayo. For more Advanced Usages, please check the demo page or visit the official website.