JQuery Plugin That Adds Highlight to Image Maps

Maphilight is a jQuery plugin that adds visual highlights to image maps. Applies to images containing the “Use the map” attribute, and delineates marked areas on the map when the mouse hovers. Not just maps, with this plugin, you can select any image to make it interactive with the highlights.

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

highlight image map area hotspots with jquery, image map highlight area onclick, jquery image hotspot responsive, jquery image map, image map mouseover highlighting

How to make use of it:

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

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

2. Call the plugin with default choices.

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

3. Config the plugin with the next choices.

$('.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,
  
});

Simple jQuery Plugin For Highlighting Image Map, Maphilight Github, highlight part of image css, image map generator jquery, maphilight example