Ayush Guleria

Advance Image Mapping is a simple plugin that lets you create interactive image maps. Add clickable points, display tooltips, and use custom or built-in icons. Perfect for product showcases, infographics, and more.
Key Features 
* Visual image mapping builder. 
* Add unlimited points with tooltips. 
* Use default icons or upload your own. 
* Embed anywhere with a shortcode. 
* Fully responsive and lightweight.

Advance Image Mapping

Create interactive image mappings with tooltips and custom icons. Add points visually and embed them anywhere using a shortcode.

shra

Active Contour lets you define interactive contour areas on media images. Each polygonal area can be associated with a title & URL, making it easy to build rich visual navigation, diagrams, and interactive image content.
<h3>Features</h3>
<ul>
<li>
Edit contours directly in the Media Library
<ul>
<li>Add, move, and delete points visually</li>
<li>Scaled preview with zoom and background options</li>
</ul>
</li>
<li>
Define attributes per area
<ul>
<li>Each area can include <code>title</code>, <code>href</code>, and custom data</li>
<li>Stored as JSON in image meta field</li>
</ul>
</li>
<li>
Import contours from external tools
<ul>
<li>Paste a JSON object describing one or multiple contours</li>
<li>Compatible with AI-generated data or exported data from vector tools</li>
<li>Preview and refine the result before saving</li>
</ul>
</li>
<li>
Gutenberg Block Support
<ul>
<li>Insert an image with interactive contours using the included block (Active Contour)</li>
<li>Live preview of the selected image and contour state</li>
</ul>
</li>
<li>
Shortcode Support
<ul>
<li>Use <code>[active_contour id="123" cid="1,2"]</code> to embed images with specific contours</li>
<li>Works anywhere shortcodes are supported (pages, posts, widgets)</li>
</ul>
</li>
</ul>
<h3>Use cases</h3>
<ul>
<li>Interactive maps and diagrams</li>
<li>Infographics with tooltips or links</li>
<li>Product showcases with click/tap areas</li>
<li>Educational or documentation content</li>
</ul>
<h3>Keyboard Shortcuts</h3>
While editing points in the contour editor, you can use the following keyboard shortcuts for greater control:
<ul>
<li>Delete — Removes the currently selected point from the contour.</li>
<li>
<ul>
<li>or Numpad + — Converts the selected segment into a curved arc (or increases arc intensity).</li>
</ul>
</li>
<li>
<ul>
<li>or Numpad – — Decreases arc curvature or switches arc back to straight line.</li>
</ul>
</li>
<li>Shift (hold) — Activates zoom mode. While holding Shift, a magnifier lens appears under the cursor to help you place points more precisely.</li>
</ul>
Other behaviors:
<ul>
<li>Click on canvas — Adds a new point in the closest location or selects an existing one if clicked near.</li>
<li>Click and drag a point — Moves the selected point with the mouse.</li>
</ul>

Active Contour

Create interactive areas on images using custom contours. Fully integrated with the media library and Gutenberg.

Advance Image Mapping vs Active Contour