jnote

What is jnote?

jnote provides a way to annotate images using the mouse and html5 canvas. When a user hovers over an image hotspot, a caption will appear.

Example

Here is an example of jnote at work. I've copied this site to an image, and will annotate it using jnote!

How-to

First, download both jnote files from the github repo and link them to your project.

Next, you'll want to initialize jnote by adding the following to the bottom of your body.

jnote.init();

Thirdly, you'll need an image to annotate.

<img src="media/example.png" style="margin: 0 auto; display: block;" class="jnote" data-jnote='
[
  {
    "x": 0.5,
    "y": 0.26,
    "title": "View this on github!",
    "caption": "Do it!"
  },
  {
    "x": 0.1,
    "y": 0.64,
    "title": "Here is our title",
    "caption": "And a description to go along with it."
  }

]
'/>
      

JSON explained

jnote uses JSON stored in a data attribute to format your image. The cool part about this is unsupported browsers just fall back to a regular image. Notice that the "x" and "y" attributes are values from 0 to 1, and not pixel values. This is because jnote is responsive. Because judging x and y values can be hard to judge, I've made a simple tool below. Upload an image, and then click to generate some JSON.