Avirtum

Yalogica

<p>PicPoints is a plugin that allows you to add interactive maps and clickable infographics to your WordPress site.</p>
<h3>How To Use</h3>
<p>To insert an interactive image into a web page, you should use the shortcode “picpoints”, for example</p>
<p>[picpoints img=”mysite.com/image.png”]<br />
   [hotspot x=”10″ y=”10″ Link=”google.com”]<br />
   [hotspot x=”50″ y=”50″ link=”bing.com”]<br />
   [hotspot x=”90″ y=”90″ link=”stackoverflow.com”]<br />
[/picpoints]</p>
<p>Shortcode parameters:<br />
img – image url<br />
class – additional css classes applied to the interactive image container<br />
x – left coordinate of the hotspot in %<br />
y – top coordinate of the hotspot in %<br />
link – url to an external resource</p>


PicPoints

Create interactive images with clickable hotspots for WordPress.

NSquared

Natalie MacLees

TylerDigital

Draw Attention Support

<p><a href="https://wpdrawattention.com?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=draw-attention" rel="nofollow ugc">Draw Attention®</a> makes it easy to create <a href="https://wpdrawattention.com/guides/first-interactive-image/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=interactive-image-maps" rel="nofollow ugc">interactive image maps</a> for your website. <a href="https://wpdrawattention.com/guides/drawing-tool/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=highlight-sections" rel="nofollow ugc">Highlight sections</a> of your images with hotspots so that users can click/tap or hover to read more information about each image map area. <a href="https://wpdrawattention.com/demos/cheese-plate/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=show-more-content" rel="nofollow ugc">Show more content</a> or <a href="https://wpdrawattention.com/demos/apartment-building/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=go-to-url" rel="nofollow ugc">direct the user to another URL</a> upon clicking or hovering your hotspot.</p>
<p>The image map can contain more information such as images, text, shortcodes, gallery, video, audio, and more. Reveal more information on click/tap or hover.  Create custom shapes for interactive hotspots directly on your original image.</p>
<p>Perfect for sketch maps, <a href="https://wpdrawattention.com/demos/floor-plan/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=floor-plans" rel="nofollow ugc">interactive floor plans for real estate</a>, <a href="https://wpdrawattention.com/demos/charts-and-graphs/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=infographics" rel="nofollow ugc">clickable infographics</a>, <a href="https://furniture-demo.ssa.rocks/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=affiliate-content" rel="nofollow ugc">interactive affiliate content</a>, <a href="https://wpdrawattention.com/demos/houses/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=sketch-annotations" rel="nofollow ugc">sketch annotations</a>, image tutorials, product feature highlights on WooCommerce, and more.</p>
<p><a href="https://wpdrawattention.com/guides/feature-overview/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=image-map-features" rel="nofollow ugc">Image Map Features</a>:</p>
<ul>
<li><strong><a href="https://wpdrawattention.com/guides/first-interactive-image/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=unlimited-hotspots#creating-the-hotspots" rel="nofollow ugc">Draw Unlimited Hotspots</a></strong>: Highlight as many areas as you want in your image map</li>
<li><strong><a href="https://wpdrawattention.com/guides/interactive-image-editor/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=highlight-on-hover#show-more-info-on8230" rel="nofollow ugc">Highlight on Hover</a></strong>: Highlight different image hotspot areas when your site visitor moves their mouse over the interactive image</li>
<li><strong><a href="https://wpdrawattention.com/guides/feature-overview/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=customizable-colors#highlight-styles" rel="nofollow ugc">Customizable Colors</a></strong>: Choose your own custom color scheme for the image map to match your site</li>
<li><strong><a href="https://wpdrawattention.com/guides/interactive-image-editor/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=show-more-info#hotspot-areas" rel="nofollow ugc">More Info on Click</a></strong>: When a highlighted area is clicked, show more information. Great to highlight points of interest on your image map</li>
<li><strong><a href="https://wpdrawattention.com/guides/interactive-image-editor/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=go-to-url#hotspot-areas" rel="nofollow ugc">Go to a URL</a></strong>: Optionally send a site visitor to another URL when clicking highlightable hotspots on your image map</li>
</ul>
<h3>Responsive Design</h3>
<p>Interactive image maps resize to fit your theme and the available screen size. Draw Attention works on all devices and adjusts your image to screens of any size. Works great on touch screens, such as tablet and mobile, too!</p>
<h3>Accessible</h3>
<p><a href="https://wpdrawattention.com/guides/interactive-image-faq/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=accessibility#do-draw-attention-interactive-images-support-accessibility-standards" rel="nofollow ugc">Image maps are accessible</a> to everyone who visits your site, regardless of device or capabilities. Your content is accessible to screen readers. All highlightable hotspots can be accessed by keyboard commands. Anyone on any device can use your interactive image map.</p>
<h3>SEO Friendly Clickable Annotations</h3>
<p>Draw Attention is built with the principles of progressive enhancement in mind, so your content is accessible even to users who have JavaScript disabled and is SEO friendly, too! Draw Attention draws SVG shapes in modern browsers and falls back to a standard image map if JavaScript is disabled.</p>
<h3>Easy to Draw Image Maps</h3>
<p>Easy to draw the highlightable areas of your image map – and easy to edit the shapes later too! Create the image map right from your WordPress dashboard. <a href="https://wpdrawattention.com/guides/display-interactive-image/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=display-interactive-images" rel="nofollow ugc">Place your interactive image map into any page or post</a> with a simple shortcode, or use our convenient Beaver Builder module or WordPress Editor Block.</p>
<h3>New and Improved Drawing Tool</h3>
<p>Draw complex shapes or perfect circles and rectangles. Use the new zoom and pan feature to get extra precise drawings of your clickable hotspots. Easily edit the shapes whenever you’d like or start from scratch at the click of a button.</p>
<p>The available <a href="https://wpdrawattention.com/guides/drawing-tool/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=drawing-tools" rel="nofollow ugc">drawing tools</a> are:</p>
<ul>
<li><strong>Polygon</strong>: Create a custom polygon shape of your preference</li>
<li><strong>Rectangle</strong>: – Create a rectangle shape of any size</li>
<li><strong>Circle</strong>: Create a perfect circle</li>
</ul>
<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/NRHspIZjP-Q?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><a href="https://wpdrawattention.com?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=pro-cta" rel="nofollow ugc">Upgrade to Draw Attention Pro</a> to get more features and customization options:</p>
<h3>Create Multiple Interactive Image Maps (Pro only)</h3>
<p>Need more than one interactive image map on your site? The Pro version allows unlimited highlightable areas on <a href="https://wpdrawattention.com/guides/feature-overview/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=unlimited-image-maps#features-in-the-pro-edition" rel="nofollow ugc">unlimited interactive images</a>.</p>
<h3>Annotation Layout Options (Pro only)</h3>
<p>Show more info about highlighted image map areas in a variety of different layouts, including <a href="https://wpdrawattention.com/bartending-101/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=lightbox" rel="nofollow ugc">lightbox</a> and <a href="https://wpdrawattention.com/demos/moustaches/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=tooltip" rel="nofollow ugc">tooltip</a>.</p>
<h3>Always Show Hotspots (Pro only)</h3>
<p><a href="https://wpdrawattention.com/guides/feature-overview/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=always-show-hotspots#always-show-hotspots-for-image" rel="nofollow ugc">Allow the image map hotspot areas to stay highlighted</a> so visitors can see where they’re located, even when they aren’t clicked yet. The perfect way to show off your hotspots and make it clear that your images are interactive.</p>
<h3>Define Multiple Highlight Styles (Pro only)</h3>
<p>Use <a href="https://wpdrawattention.com/guides/styling-the-interactive-image/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=multiple-styles#define-multiple-highlight-styles" rel="nofollow ugc">multiple highlight colors</a> for the interactive image hotspots. If you choose to define multiple highlight styles, another section will pop up called, “Styles” where you can define your own color schemes within your image. Make each hotspot unique with it’s own color, border, and opacity settings!</p>
<h3>20 Pre-Defined Color Palettes (Pro only)</h3>
<p>Choose from one of <a href="https://wpdrawattention.com/guides/feature-overview/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=color-scheme#twenty-preset-color-schemes" rel="nofollow ugc">20 pre-defined color palettes</a> or use your own custom color scheme on the image maps.</p>
<p><a href="https://wpdrawattention.com?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=pro-cta" rel="nofollow ugc">Upgrade to Draw Attention Pro Today!</a> to get more features and customization options:</p>
<h3>What could you make with Draw Attention?</h3>
<ul>
<li>Showcase (real estate)[https://wpdrawattention.com/demos/floor-plan/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=floor-plans] or a new property development. Give your visitors a virtual tour where they can explore floor plans and photos.</li>
<li><a href="https://wpdrawattention.com/guides/styling-the-interactive-image/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=sell-booths#define-multiple-highlight-styles" rel="nofollow ugc">Sell booths</a> to exhibitors at your trade show or conference by showing them an engaging interactive map of the trade show floor.</li>
<li>Make a product tour or <a href="https://game-demo.ssa.rocks/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=tutorial-documentation" rel="nofollow ugc">tutorial documentation</a> – explain your product by highlighting features in a visual way.</li>
<li><a href="https://wpdrawattention.com/demos/charts-and-graphs/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=infographics" rel="nofollow ugc">Interactive infographic</a> – annotate and call out important areas on your infographic and show more information about those points of interest.</li>
<li>If you’re familiar with <a href="https://wpdrawattention.com/guides/first-interactive-image/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=image-maps#interactive-images-galore" rel="nofollow ugc">HTML image maps</a>, we help you make those in a modern way that’s compatible with today’s devices & browsers.</li>
<li>Add another dimension to your Blog content by using interactive images to explain concepts or display <a href="https://furniture-demo.ssa.rocks/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=affiliate-content" rel="nofollow ugc">affiliate links</a> in an engaging way.</li>
</ul>
<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/74yvCnYQDPE?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>
<h3>2.0.41 – 2025-10-28</h3>
<h3>Fixes</h3>
<ul>
<li>Draw Attention widget doesn’t show up in Beaver Builder</li>
</ul>
<h3>2.0.32 – 2025-03-25</h3>
<h3>Fixes</h3>
<ul>
<li>Fix Conflict with WP MapIt not displaying drawing tools</li>
</ul>
<h3>2.0.26 – 2024-06-18</h3>
<h3>Features and Improvements</h3>
<ul>
<li>
<p>Hid the move to trash button.</p>
</li>
<li>
<p>Widget live preview</p>
</li>
</ul>
<h3>2.0.24 – 2024-04-05</h3>
<h3>Fixes</h3>
<ul>
<li>Fixed Newsletter component showing up on different screens.</li>
</ul>
<h3>2.0.22 – 2024-03-19</h3>
<h3>Features and Improvements</h3>
<ul>
<li>Adding News Letter Notice to Draw Attention</li>
</ul>
<h3>2.0.17 – 2023-11-07</h3>
<h3>Features and Improvements</h3>
<ul>
<li>Tested up to WP 6.4</li>
</ul>
<h3>2.0.16 – 2023-10-29</h3>
<h3>Features and Improvements</h3>
<ul>
<li>Add nonce checks for additional security</li>
</ul>
<h3>2.0.15 – 2023-10-19</h3>
<h3>Fixes</h3>
<ul>
<li>Fix disclosed vulnerability affecting Contributor-level users</li>
</ul>
<h3>2.0.14 – 2023-08-12</h3>
<h3>Features and Improvements</h3>
<ul>
<li>Tested up to WP 6.3</li>
</ul>
<h3>2.0.13 – 2023-06-25</h3>
<h3>Fixes</h3>
<ul>
<li>Fix PHP warning in CMB2 library</li>
</ul>
<h3>Features and Improvements</h3>
<ul>
<li>Prevent conflicts with other plugins that use the leaflet library</li>
</ul>
<h3>2.0.12 – 2023-05-26</h3>
<p>For older changelog entries, please see the <a href="https://plugins.svn.wordpress.org/draw-attention/trunk/CHANGELOG.md" rel="nofollow ugc">additional changelog.txt file</a> delivered with the plugin.</p>


Interactive Image Map Plugin – Draw Attention

Create interactive images with clickable hotspots, using modern image maps for WordPress. Perfect for floor plans, infographics, maps, and more.

PicPoints vs Interactive Image Map Plugin – Draw Attention