JavaScript Library To Highlight Image Map – Image Map Highlighter

Category: Javascript | October 9, 2016
Author: thaiphan
Views Total: 6,028 views
Official Page: Go to website
Last Update: October 9, 2016
License: MIT

Preview:

JavaScript Library To Highlight Image Map – Image Map Highlighter

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
});

You Might Be Interested In:


One thought on “JavaScript Library To Highlight Image Map – Image Map Highlighter

  1. Piotr Rajewski

    This is exactly what I need and what does not work for me in SharePoint, but maybe I’m pasting it wrong.

    Any chance for a complete code file?

    Reply

Leave a Reply