JQuery Plugin That Adds Highlight to Image Maps | Maphilight

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.


3. Config the plugin with the next choices.


  // 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

See Demo And Download

Official Website(kemayo): Click Here

This superior jQuery/javascript plugin is developed by kemayo. For extra Advanced Usages, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…