What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
To add clickable hotspots to a WordPress image, use an image-hotspot or image-map plugin. Create the interactive image, add pins or drawn regions, configure each hotspot’s tooltip, popup, or link, and place the result on your page with the plugin’s block or shortcode.
Choose pins or drawn regions first
Your image determines the better interaction style:
- Point pins: Best when each item is a specific location, such as labels on a product photo. Pleaseup Image Hotspots provides positioned points with popup content.
- Drawn regions: Best when visitors should select an area of a plan, illustration, or infographic. Draw Attention supports polygon, rectangle, and circle shapes.
These are feature-based choices, not a universal ranking. Confirm the plugin’s current WordPress and page-builder compatibility on its directory page before installing.
WordPress hotspot plugins to compare
| Plugin | Documented features | Useful when |
|---|---|---|
| Draw Attention | Drawn shapes, hover or click content and URL actions, a block and shortcode, responsive behavior, and stated keyboard and screen-reader support. Some advanced layouts and multiple-map features are Pro capabilities. | You need selectable areas on a plan, diagram, or infographic. |
| Pleaseup Image Hotspots | Drag-and-drop editor, percentage-based coordinates, popup content, [wphs_image] shortcode, and stated Gutenberg, Elementor, and ACF workflows. |
You need point pins and tooltip content or use those listed editing workflows. |
| Vision | The listing says the free version is limited to one interactive image map; Pro adds features and support. | One map is enough and its current feature set meets your needs. |
Other directory choices appear on the official image-map and image-hotspot tag pages, including MapSVG, PinSpot, and Image Hotspot by DevVN. Active-install counts on those pages are directory snapshots, not quality or support scores.
#1 Best Overall
Install a hotspot plugin
- Back up your site or ensure your host can restore it.
- In the WordPress dashboard, go to Plugins → Add New.
- Search for the plugin you selected, such as “Draw Attention” or “Pleaseup Image Hotspots.”
- Check the listing’s current WordPress compatibility, update history, documentation, and licensing details.
- Click Install Now, then Activate.
Create and configure the hotspots
Draw Attention: make selectable areas
- Open the plugin’s interactive-image editor and create a new interactive image.
- Select or upload the base image.
- Choose a polygon, rectangle, or circle drawing tool.
- Draw the region over the relevant part of the image and adjust its points or dimensions.
- Add the content that should appear on hover or click, or assign a destination URL.
- Save the interactive image and copy the generated block or shortcode if you will embed it elsewhere.
Draw Attention states that it draws SVG shapes in modern browsers and falls back to a standard image map when JavaScript is disabled. That is a vendor description, not an independent test.
Pleaseup: add point pins
- Open Image Hotspots → Editor.
- Select the image you want to annotate.
- Click the image to add a hotspot, then drag it into the exact position.
- Enter the hotspot’s popup content and repeat for each point.
- Save the map and note its attachment or map ID.
Pleaseup says coordinates are stored as percentages of the image’s natural dimensions, so they scale with different rendered image sizes. Treat that as the plugin author’s documented behavior.
Insert the interactive image on a page
Use a block
If the plugin provides a WordPress block, edit the target post or page, add the plugin’s block, and select the saved interactive image from its settings. This is usually the simplest Gutenberg workflow.
Use a shortcode
Place the shortcode in a Shortcode block (or the editor location supported by your page builder). Pleaseup documents this format:
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11[wphs_image id="123"]
Replace 123 with the actual image or map ID from your installation. Draw Attention also documents a shortcode option; copy the exact generated value rather than typing an ID from another map.
Use a builder or custom-field workflow
Pleaseup’s listing describes compatibility with Gutenberg, Elementor, and ACF. In those environments, insert the plugin’s block, widget, shortcode, or field output exactly as documented for your current version. Builder integrations can change independently of WordPress core.
Rank #4
Test before publishing
- Preview the page at desktop, tablet, and narrow mobile widths. A pin that is accurate on the source image can become misleading if the image is cropped or covered by a responsive layout.
- Open every hotspot and verify its text, link, and trigger behavior.
- Tab through the image and confirm that keyboard users can reach and activate interactive areas.
- Check the page with your site’s contrast, focus, and screen-reader settings. Draw Attention states that it supports keyboard and screen-reader accessibility; verify the actual result on your theme.
- Test with JavaScript enabled and, where relevant, disabled, especially if you depend on a fallback image-map behavior.
Understand limits and removal risks
Free editions can restrict maps or advanced layouts. Draw Attention identifies some advanced layouts and multiple-map functionality as Pro features, while Vision’s listing limits its free version to one interactive image map. Compare the current plan details before designing a site around a paid-only feature.
Also check data retention before activation. Pleaseup says uninstalling removes hotspot settings, attachment metadata, galleries, and tooltips. Export or document your maps if rebuilding them would be costly.
Recommended Free Tools
A practical selection checklist
- Does it support the shape you need: pins, rectangles, circles, or polygons?
- Can each hotspot show a tooltip, open a popup, or link directly to a URL?
- Will percentage-based or otherwise responsive positioning preserve accuracy at different widths?
- Is the output available as a block, shortcode, or your page builder’s native integration?
- Are keyboard focus, activation, labels, and screen-reader behavior documented and testable?
- How many maps and advanced layouts are included without a paid upgrade?
- What content remains if you deactivate or uninstall the plugin?
The Bottom Line
Install a maintained hotspot plugin, choose pins or drawn regions to match the image, create each interactive area, embed the saved map with its block or shortcode, and test the published result on mobile and with a keyboard before you rely on it.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
