Canvas Based Image Annotation Plugin For jQuery - HoverDotJS

HoverDotJS is a jQuery plugin which allows you to dynamically adds interactive annotations / comments / markers / notes to the images using html5 canvas element. Hover over the dot you will see a tooltip populated with custom messages you specify in the JavaScript.

How to use it:

1. Include both jQuery library and the jQuery HoverDotJS plugin on the webpage when needed.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="hoverDot.js"></script>

2. Create an html5 canvas element on the webpage.

<canvas id="hoverdemo"></canvas>

3. Call the function on the canvas element, specify the path to your background image and add your own image notes with custom positions and text messages.

$("#hoverdemo").dotHover([
  { x: 281, y: 485, text: 'Example dot' },
  { x: 250, y: 67, text: 'I\'m a dot!' },
  { x: 120, y: 180, text: 'Hey there :)' }
], {
  img: 'karte.png'
});

4. All default plugin settings and callbacks.

$("#hoverdemo").dotHover(dots, {

  // this should be a valid image url which will be used as background
  img: "karte.png",

  // whether to allow the user to place dots on click
  setmode: false,

  // a callback for when an event is created
  setcallback: function (dot) {},

  // default text for an unitialized dot
  defaulttext: "Example Text",

  // Whether to force a specific width to height ratio
  // for example, for 16:9 use
  // forceRatio: 1.77777777777778,
  forceRatio: false,

  // Reference width/height to which all coords are relative to.
  // Usually, there's no reason to change this, but if you have
  // old coords which are aligned differently you may want to
  // override this. The default values are pretty high for better
  // precision.
  align: {
    x: 100000, // width
    y: 100000 // height
  }
  
});

Change log:

2016-05-11

• Added forceRatio option.

---

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