Le Van Toan

<p>Image Hotspot by DevVN help you add hotspot to your images.</p>
<h3>Used</h3>
<p>Copy your shortcode to view eg: [devvn_ihotspot id=”YOUR_ID”]</p>
<p><iframe loading="lazy" title="Image Hotspot by DevVN - WordPress Plugin" width="750" height="422" src="https://www.youtube.com/embed/id2Kt6gUKhs?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h3>jQuery plugin include</h3>
<ul>
<li>jQuery PowerTip <a href="https://stevenbenner.github.io/jquery-powertip/" rel="nofollow ugc">PowerTop Home</a></li>
</ul>


Image Hotspot by DevVN

Image Hotspot by DevVN help you add hotspot to your images.

shra

<p><strong>Active Contour</strong> 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.</p>
<h3>Features</h3>
<ul>
<li>
<p><strong>Edit contours directly in the Media Library</strong></p>
<ul>
<li>Add, move, and delete points visually</li>
<li>Scaled preview with zoom and background options</li>
</ul>
</li>
<li>
<p><strong>Define attributes per area</strong></p>
<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>
<p><strong>Import contours from external tools</strong></p>
<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>
<p><strong>Gutenberg Block Support</strong></p>
<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>
<p><strong>Shortcode Support</strong></p>
<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>
<p>While editing points in the contour editor, you can use the following keyboard shortcuts for greater control:</p>
<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>
<p>Other behaviors:</p>
<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.

Image Hotspot by DevVN vs Active Contour