Canvas Based Interactive Image Map In jQuery - Pictarea

Pictarea is a jQuery plugin that helps you draw interactive, configurable, selectable markers/notes on your image using image map and HTML5 canvas.

How to use it:

1. To use the plugin, include the minified version of the pictarea plugin after loading jQuery library.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/pictarea.min.js"></script>

2. Define an image map using map and area element.

<img id="map" src="1.jpg" usemap="#map-mask" />
<map name="map-mask">
  <area shape="rect" coords="10,10,20,20" alt="description 1" target="1" />
  <area shape="rect" coords="80,80,90,90" alt="description 2" target="2" />
</map>

3. Attach the plugin to the image map and done.

$(function() {
  $('#map').pictarea();
});

4. Customize the styles of the image map depending on the current status.

$(function() {
  $('#map').pictarea({

    normal: {
      fillStyle: 'rgba(255,255,255,.4)',
      strokeStyle: 'rgba(255,255,255,.8)',
      lineWidth: 1
    },

    hover: {
      fillStyle: 'rgba(255,255,255,.6)',
      strokeStyle: '#fff',
      lineWidth: 2,
      shadowColor: '#fff',
      shadowBlur: 10
    },

    active: {
      fillStyle: 'rgba(255,255,255,.8)',
      strokeStyle: '#f00',
      lineWidth: 2
    },

    disabled: {
      fillStyle: 'rgba(0,0,0,.4)',
      strokeStyle: 'transparent'
    }
    
  });
});

5. Default value keys.

$(function() {
  $('#map').pictarea({

    areaValueKey: 'target',
    areaDisableKey: 'disabled'

  });
});

6. Specify the maximum number of selections allowed.

$(function() {
  $('#map').pictarea({

    maxSelections: 1

  });
});

7. Decide whether to rescal the image map on window resize.

$(function() {
  $('#map').pictarea({

    rescaleOnResize: false

  });
});

8. Available event handlers.

$('#map').pictarea().on('enterArea.pictarea', function(evt) {
  // when entering the area
  // can be used to display a tooltip
});

$('#map').pictarea().on('leaveArea.pictarea', function(evt) {
  // after the mouse leaves the area
  // can be used to hide the tooltip
});

$('#map').pictarea().on('selectArea.pictarea', function(evt) {
  // when an area is selected
});

$('#map').pictarea().on('change.pictarea', function(evt) {
  // when a value changed
});

Changelog:

2023-09-21

• Fix an issue with not cancelable events

---

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