Image Hotspot Pro places annotations on images and maps so visitors can open details from the point they relate to. Each marker can reveal a tooltip or pop-up with text, images, videos, or links. You can also display YouTube or Vimeo videos directly on your site.

Use hotspots to label parts of a product image, identify places on a map, explain a diagram, or add context to an infographic. A visual can also become a content exploration activity or interactive assessment.

Choose a pointer for each point

Markers can use a Font Awesome icon, a custom image or icon, or text. The built-in Font Awesome library includes more than 1,600 icons. Set icon color, hover color, size, and a hover icon. Custom image or icon pointers have size controls and can use a separate hover image or icon. Text pointers can be styled with font size, font color, and background color.

Move markers by dragging, and edit or remove them as the image map changes. Choose whether a user opens the annotation by hovering or clicking. Tooltip templates are available, and embedded or custom code can be used for tooltip content. Links in tooltip content can open in a new tab.

Place image maps in WordPress

Use unlimited shortcodes to add image maps to posts, pages, widgets, theme areas, and page-builder layouts. The plugin works with current themes and popular page builders, allows multiple instances on a page, and is responsive on mobile devices and tablets. A live preview in the WordPress backend lets you review the layout while editing. Custom CSS is available for additional styling.

Create and place a hotspot layout

1. Install and activate Image Hotspot Pro in WordPress.
2. Create a hotspot layout and add the image or visual to annotate.
3. Place markers using icons, custom images, or text.
4. Set marker styles, add tooltip content, and choose hover or click behavior.
5. Preview the layout, then place it in a post, page, widget, theme area, or page-builder layout with a shortcode.

For further presentation changes, use custom CSS.