Free tools Windows power users keep installed
One-click scans. No signup required.
To add image hotspots in WordPress, install an image-hotspot or image-map plugin, create an interactive image in that plugin’s editor, add clickable regions or pins, and place the result on your page with the plugin’s block or shortcode. The exact controls depend on the plugin: Draw Attention creates polygon, rectangle, or circle areas, while Pleaseup Image Hotspots places point hotspots with popup content.
Choose the hotspot style you need
Decide whether visitors should select an area of an image or a point on it before choosing a plugin.
Drawn regions
Use polygon, rectangle, or circle regions when each selectable area represents a meaningful part of an illustration, floor plan, map, product diagram, or infographic. A visitor can click or hover over the outlined area to see content or follow a URL. Draw Attention documents these shapes and supports both a WordPress block and shortcode on its WordPress.org listing.
Point pins
Use pins when each interaction belongs to a precise location, such as a room on a photograph or a component on a product image. Pleaseup’s editor lets you click to add a hotspot, reposition it, and edit popup content. Its listing documents percentage-based coordinates and compatibility with Gutenberg, Elementor, and Advanced Custom Fields (ACF) workflows: Pleaseup Image Hotspots.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, 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 minute#1 Best Overall
Compare plugin approaches before installing
Feature descriptions below come from the plugins’ directory listings; they are vendor-documented capabilities rather than independent test results. Confirm current WordPress and page-builder compatibility on the listing before installing.
| Option | Documented capabilities | Best fit |
|---|---|---|
| Draw Attention | Drawn polygon, rectangle, and circle areas; hover or click content and URL actions; block and shortcode; stated responsive and accessibility features. Some advanced layouts and multiple-map features are identified as Pro capabilities. | Illustrations, plans, maps, and infographics made of selectable regions. |
| Pleaseup Image Hotspots | Drag-and-drop editor, percentage-based coordinates, popup content, [wphs_image] shortcode, and stated Gutenberg, Elementor, and ACF compatibility. |
Pin-based annotations and tooltip or popup content. |
| Vision | The listing says the free version is limited to one interactive image map; its Pro version adds features and support. | A site that needs one map and finds the listed feature set sufficient. |
| Other directory options | The official image-map and image-hotspot tag pages list additional plugins, including MapSVG, PinSpot, and Image Hotspot by DevVN. | Cases where maintenance, editor integration, or a specific interaction requires another option. |
Install an image-hotspot plugin
- Sign in to WordPress and open Plugins → Add New.
- Search for the plugin you selected, such as “Draw Attention” or “Pleaseup Image Hotspots.”
- Open the plugin’s listing to check its current WordPress compatibility, changelog, support activity, and whether required features are free or paid.
- Click Install Now, then Activate. Draw Attention documents this standard directory installation path on its plugin page.
Create the interactive image
Draw Attention workflow
- Open the plugin’s area for creating an interactive image and choose or upload the source image.
- Use the drawing tools to create polygon, rectangle, or circle regions over the relevant parts of the image.
- For each region, add the text, hover or click behavior, or destination URL you want visitors to receive.
- Save or publish the interactive image in the plugin editor.
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 statement from its directory description, not an independent compatibility test.
Pleaseup Image Hotspots workflow
- Open Image Hotspots → Editor in the WordPress dashboard.
- Select the image you want to annotate.
- Click the image to add a hotspot, drag it to the correct position, and enter the popup content.
- Repeat for every point, then save the map and note its ID.
Pleaseup says coordinates are stored as percentages of the image’s natural dimensions, so they scale with the rendered image size. Treat that as a vendor claim and verify the result on your own theme and devices.
Insert hotspots on a page or post
Use the plugin block
If the plugin provides a Gutenberg block, edit the target page, click the + block inserter, search for the plugin’s block name, and select the interactive image you created. Configure any display settings in the block sidebar, then save or publish the page.
Use a shortcode
Shortcodes work in the WordPress editor and in many page builders that provide a shortcode or text element. Pleaseup documents this format:
[wphs_image id="123"]
Replace 123 with the actual map or attachment ID from your installation. Draw Attention also documents a shortcode option; copy the exact shortcode generated by its editor rather than guessing an attribute name.
Rank #3
- Used Book in Good Condition
Use a builder or ACF integration
If you build pages with Elementor or connect content through ACF, use the integration documented by your selected plugin. Pleaseup lists Gutenberg, Elementor, and ACF compatibility, but integrations and supported versions can change, so verify them on the current listing before building a production page.
Test the published result
Preview the actual page, not only the plugin editor, before publishing it widely.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minute- Check desktop, tablet, and narrow-phone widths. Confirm that every region or pin stays aligned after the image resizes.
- Activate each hotspot with the mouse or touch and verify that popup text, links, and close controls work.
- Navigate with the keyboard alone. Check that hotspots receive focus in a sensible order and that focused states are visible.
- Use a screen reader or accessibility checker to confirm that hotspot controls have understandable names and that popup content can be reached.
- Test with JavaScript disabled if your project requires a fallback; Draw Attention documents a standard image-map fallback, but this article does not independently verify it.
- Check loading performance and the image’s alternative text. The hotspot layer does not replace useful alt text for visitors who cannot use the interactive controls.
Draw Attention and Pleaseup advertise responsive behavior, and Draw Attention advertises keyboard and screen-reader accessibility. Those are vendor statements; previewing and accessibility testing remain your responsibility.
Free-versus-paid limits to check
Do not assume that a free installation includes unlimited maps or every layout. Draw Attention’s listing identifies some advanced layouts and multiple-map functionality as Pro features. Vision’s listing says its free edition is limited to one interactive image map. Compare the current plan details with your required number of maps, layout controls, popup behavior, and support before committing to a workflow.
What happens if you remove the plugin?
Plan for content portability before using hotspots on important pages. Pleaseup states that uninstalling removes hotspot settings, attachment metadata, galleries, and tooltips. If those settings are deleted in your installation, replacing the plugin later may require rebuilding the maps, so keep source images, hotspot text, URLs, and coordinates in your own project documentation.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot common problems
Hotspots move out of position on mobile
Check that the plugin stores responsive coordinates, that the image is not being cropped differently by the theme, and that no CSS rule changes the image’s aspect ratio. Reposition the hotspot against the rendered image at the narrowest supported width, then retest at desktop width.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Best Value
- This inspiring book makes drawing in a realistic style easier than you may think and more fun than you ever imagined
- Author: mark and Mary Willenbrink
- Made in china
The shortcode displays nothing
Confirm that the shortcode is in a shortcode-capable block or builder element, that the ID belongs to the saved interactive image, and that the plugin is active. Copy the generated shortcode again instead of retyping it.
A popup is hidden behind another element
Inspect the theme and page-builder stacking order (z-index), overflow settings, and containers with fixed heights. Remove clipping or raise the popup layer only where it does not cover navigation or other controls.
Keyboard users cannot reach a hotspot
Check the plugin’s documented accessibility support and test a live page with keyboard navigation. If a hotspot is not focusable or its popup cannot be operated without a pointer, choose a plugin or presentation that supplies an accessible alternative, such as a normal list of links or descriptive text below the image.
Quick Recap
Practical selection checklist
- Choose regions for area-based diagrams and pins for point annotations.
- Confirm whether your editor needs a block, shortcode, Elementor element, or ACF connection.
- Check popup, tooltip, hover, click, and direct-link behavior.
- Verify responsive positioning on your theme at several widths.
- Review keyboard and screen-reader behavior instead of relying only on marketing claims.
- Check the free map count and which layouts require Pro.
- Read the uninstall and data-retention notes before creating many maps.
- Review the plugin’s current directory compatibility and support information before activation.
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.
