This article shows you how to add interactive hotspots to images on your WordPress website.
Interactive hotspots are clickable areas on images that show information when visitors hover over or click them. They're useful for product showcases, floor plans, team photos, or any image where you want to highlight specific areas.
Install a Hotspot Plugin
WordPress needs a plugin to create image hotspots. Go to your WordPress dashboard and click Plugins > Add New. Search for "image hotspot" or "interactive image".
Recommended plugins include:
- Image Hotspot by WP Darko
- Interactive Image by Themeisle
- WP Image Hotspot
Install and activate your chosen plugin. Most hotspot plugins work similarly, so pick one with good reviews and recent updates.
Upload Your Base Image
Before adding hotspots, you need to add your image to WordPress. Your image should be clear and large enough for visitors to see the hotspot areas easily.
Images work best at 800 pixels wide or larger. Make sure your image shows the areas you want to make interactive clearly.
Create Your First Hotspot
Once your plugin is active, look for a new menu item in your WordPress dashboard (usually called "Hotspots" or "Interactive Images").
Click Add New to create your first interactive image:
- Give your hotspot image a title (for your reference)
- Upload or select your base image
- The plugin will display your image with tools to add hotspots
- Click where you want to place a hotspot on the image
- A hotspot marker will appear
Configure Hotspot Settings
For each hotspot you create, you can set:
Hotspot Content: The text or information that appears when someone hovers over or clicks the hotspot. Keep this short and helpful.
Link Action: Choose what happens when someone clicks the hotspot - open a webpage, show a popup, or display more information.
Hotspot Style: Most plugins let you choose different marker styles (dots, plus signs, or custom icons).
Animation: Some plugins offer hover effects like pulsing or growing hotspots to draw attention.
Add the Interactive Image to Your Page
After creating your hotspots, you need to display the interactive image on your website. Most plugins give you either:
- A shortcode to copy and paste
- A block to add in the WordPress editor
- A widget for sidebars
To add it to a page or post, edit the page where you want the interactive image to appear. If using a shortcode, paste it where you want the image. If using a block, search for your plugin's block name and insert it.
Test Your Hotspots
After adding the interactive image to your page, view the page on your website to test:
- Hover over each hotspot to check the information displays correctly
- Click hotspots that should link somewhere
- Check how it looks on mobile devices
- Make sure hotspots are positioned correctly
If hotspots aren't in the right place, go back to your plugin settings and adjust their positions.
If you're still stuck with creating interactive hotspots, contact Web60 support for help with plugin recommendations or troubleshooting.
FAQ
Q: Do image hotspots work on mobile devices?
A: Yes, most modern hotspot plugins work on mobile devices. Visitors tap hotspots instead of hovering over them.
Q: How many hotspots can I add to one image?
A: Most plugins don't limit the number of hotspots, but too many can make your image confusing. Keep it simple with 3-8 hotspots maximum.
Q: Can I link hotspots to other pages on my website?
A: Yes, most hotspot plugins let you link to any webpage, including other pages on your site, external websites, or popup windows.
Q: Will hotspots slow down my website?
A: Good hotspot plugins are lightweight and shouldn't significantly impact your site speed. Choose well-coded plugins with regular updates.
Q: Can I change the hotspot markers to match my brand?
A: Many plugins offer different marker styles, colours, and sizes. Some allow custom icons to match your website's design.
Q: What happens if I delete the base image?
A: If you delete the original image from your media library, the interactive hotspots will stop working. Always keep your base images in WordPress.
Q: Can visitors see the hotspots immediately?
A: Most plugins show visible markers or indicators so visitors know the image is interactive. You can usually adjust how obvious these markers are.
Last updated: 1 March 2026