Philip Newcomer

<p>This plugin simply packages the <a href="https://github.com/stowball/jQuery-rwdImageMaps" rel="nofollow ugc">RWD Image Maps</a> jQuery plugin for use in WordPress, providing an easy way to make image maps responsive in a WordPress theme.</p>
<p>This plugin is licensed under the GPLv2, and the jQuery plugin is licensed under the MIT license.</p>
<h3>Javascript Warning</h3>
<p>It goes without saying, but the RWD Image Maps jQuery plugin requires javascript to be enabled in the user’s browser for it to work its magic.</p>
<h3>Need Help?</h3>
<p>If you have questions or problems with the RWD Image Maps <strong>jQuery</strong> plugin itself (not the WordPress wrapper for it), go to the <a href="https://github.com/stowball/jQuery-rwdImageMaps" rel="nofollow ugc">jQuery RWD Image Maps plugin page</a> on GitHub.</p>


Responsive Image Maps

Makes image maps responsive by packaging the RWD Image Maps jQuery plugin for use in WordPress.

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.

Responsive Image Maps vs Active Contour