JavaScript Library To Highlight Image Map – Image Map Highlighter

Preview:

Description:

A pure JavaScript based Image Map Highlighter which enables to highlight specific areas of your images with custom styles. Works on modern browsers which have HTML5 canvas support.

How to use it:

Embed your image into the img tag which has an attribute ‘usemap’.

<img src="demo.jpg" usemap="#map">

Define your custom clickable areas within the imagemap as follows:

<map name="map">
  <area href="#" shape="poly" coords="240,300,400,300,400,200,240,200">
  <area href="#" shape="circle" coords="200,100,60">
</map>

The primary CSS styles for the Image Map Highlighter.

.map-container {
  background-size: cover;
  position: relative;
}
.map-container canvas { position: absolute; }
.map-container img {
  opacity: 0;
  position: absolute;
}

Include the main JavaScript file at the bottom of the webpage.

<script src="dist/image-map-highlighter.js"></script>

Create a new ImageMapHighlighter on the image.

var image = document.querySelector('.image');
var highlighter = new ImageMapHighlighter(image);

Initialize the Image Map Highlighter.

highlighter.init();

Customize the image maps when highlighted on mouse hover.

var highlighter = new ImageMapHighlighter(image,{
    fill: true,
    fillColor: '000000',
    fillOpacity: 0.2,
    stroke: true,
    strokeColor: 'ff0000',
    strokeOpacity: 1,
    strokeWidth: 1,
    alwaysOn: false
});