Simple jQuery Plugin For Highlighting Image Map - Maphilight

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 type="text/javascript" src=""></script>
<script type="text/javascript" src="../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.


4. All default options.

fill: true,
fillColor: '000000',
fillOpacity: 0.2,
stroke: true,
strokeColor: 'ff0000',
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: false,
wrapClass: true,
// plenty of shadow:
shadow: false,
shadowX: 0,
shadowY: 0,
shadowRadius: 6,
shadowColor: '000000',
shadowOpacity: 0.8,
shadowPosition: 'outside',
shadowFrom: false

Change logs:



  • updated js to use jquery 3.0


  • JS update.

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

  • Publication date: 08.02.2018
  • Source