Premium jQuery Plugin

Annotate Image JavaScript Library Examples

Download This Plugin Back To jQueryScript

A professional-grade solution for adding interactive hotspots, notes, and editable areas to any image. Seamlessly integrated with jQuery.

Interactive Workspace

Full editing capabilities enabled. Click anywhere to add a note or drag existing ones.

EDITABLE: TRUE PERSISTENT STORAGE

Consumer Viewer Mode

Read-only interface optimized for end-users. Perfect for product tours and educational content.

EDITABLE: FALSE INTERACTIVE HOVER

Real-time Event Stream

Waiting for interactions...

Flexible Layouts

Notes automatically reposition based on image boundaries and viewport size.

Highly Secure

Strictly controlled editability per-note or globally via simple configuration.

Lightweight API

Clean, easy-to-use jQuery interface that won't bloat your project.

Implementation

Quick start guide for your next project.

HTML Setup

<link rel="stylesheet" href="annotate.min.css">
<script src="jquery.min.js"></script>
<script src="jquery.annotate.min.js"></script>

<img id="my-image" src="image.jpg">

JavaScript

$('#my-image').annotateImage({
  editable: true,
  notes: [
    { top: 100, left: 200, text: "Hello!" }
  ]
});