Simple jQuery Plugin For Highlighting Image Map - Maphilight

Simple jQuery Plugin For Highlighting Image Map - Maphilight
File Size: 207 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></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.

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

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

Changelog:

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.