JavaScript Library For Annotating Images With Full-size Overlay – target.js

target.js is a pure JavaScript library used for adding custom markers and notes to images (or any other elements) that will expand into a full-sized overlay with custom text when hover over.

How to use it:

Insert the style sheet target.min.css and JavaScript file target.min.js into your webpage.

<link href="dist/target.min.css" rel="stylesheet">
<script src="dist/target.min.js"></script>

Add custom markers and notes to a specified container as follows:

target.set(
  {
    el: '#el',
    text: 'Text 1',
    pointX: '2.4rem',
    pointY: '9rem'
  },
  {
    el: '#el',
    text: 'Text 2',
    pointX: '10rem',
    pointY: '21rem'
  },
  {
    el: '#el',
    text: 'Text 3',
    pointX: '16rem',
    pointY: '35rem'
  }
).init();