Make visual content interactive
Image Hotspot Pro helps turn images, maps, and video content into interactive visual experiences. Add annotation pointers to an image and let visitors reveal information by hovering over or clicking a hotspot. Instead of placing every explanation in a long text section, you can connect information directly to the relevant area of a visual.
The plugin can display popovers containing text, images, videos, or links. This makes it suitable for image-based explanations, infographic sections, product visuals, maps, content exploration activities, and interactive assessments. You can also display YouTube or Vimeo videos directly on your website without sending visitors to another page.
Flexible hotspot pointers
Choose from three pointer styles to match the visual purpose of each annotation: Font Awesome icons, a custom image or icon, or text. The plugin includes more than 1,600 built-in Font Awesome icons, giving you a broad selection for marking locations, features, steps, or points of interest.
- Font Awesome pointers: Select from 1,600+ built-in icons.
- Custom image or icon pointers: Use visual markers suited to your design.
- Text pointers: Place words or labels directly over the image.
- Icon styling: Set icon color, hover color, icon size, and hover icon options.
- Font controls: Customize fonts and their colors for text-based annotations.
Images and their annotations can be customized and updated without writing code. You can choose whether visitors discover information through mouse hover or a click, depending on how much interaction the visual requires.
Use it across WordPress
Image Hotspot Pro supports posts, pages, widgets, current themes, and page builders. Unlimited shortcodes let you place interactive image maps in the locations where they are most useful, while custom CSS provides an additional way to adjust presentation.
For example, a business can annotate a product image with feature details, a site can mark locations on a map, and an educational page can reveal explanations beside parts of a diagram. An infographic can use hotspots to keep the main visual clear while providing additional context on demand. A video-based section can also use annotations to connect viewers with related information.
Plan an effective image map
Start with an image that benefits from visual guidance. Add pointers where visitors need clarification, then choose an icon, custom image, or text marker for each area. Add the relevant text, image, video, or link to the popover and decide whether hover or click should reveal it. Preview the result and refine colors, sizes, fonts, and positioning so the annotations remain readable within the visual.
Installation and setup
- Install and activate Image Hotspot Pro in WordPress.
- Create an image hotspot layout and add the image or visual you want to annotate.
- Add pointers using icons, custom images, or text.
- Configure pointer styling and add popover content such as text, images, videos, or links.
- Place the result in a post, page, widget, theme area, or page-builder layout using a shortcode.
Custom CSS can be used when further presentation adjustments are required.
