Le Van Toan

<p>Image Hotspot by DevVN helps you add hotspots to your images.</p>
<h3>Usage</h3>
<p>Copy your shortcode to view, e.g.: [devvn_ihotspot id=”YOUR_ID”]</p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/id2Kt6gUKhs?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></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 helps you add hotspots 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