Image Hotspots AGENT

Image Hotspots Agent is a module that provides a Paragraphs-based solution for adding interactive hotspots to images. It allows developers to configure hotspot-enabled image behavior, enabling editors to place rich, clickable hotspot content—such as titles, formatted text, images, and links—directly on images.

Features

• Interactive hotspots: Place clickable hotspots anywhere on images
• Multiple display variants: Modal popup, sidebar, fullscreen, and zoom-in views
• Rich content: Each hotspot supports:
  • Title
  • Description (formatted text)
  • Optional image
  • Optional link with custom text (http will open in new link)
• Customizable styling: Configurable colors, sizes, and display options
• Access control: Granular permissions for creating, editing, and viewing hotspots

This module is ideal for product showcases, educational content, interactive diagrams, infographics, and storytelling layouts.

Post-Installation

1. Enable the module.
2. Go to Structure → Paragraph types.
3. Edit a paragraph type and enable the Image Hotspot Agent behavior.
4. Select the image field to use for hotspots.
5. Configure default display and styling options.

Additional Requirements

• Drupal 10 or 11
• Media module (core)
• Paragraphs module

Recommended modules/libraries

• Media module (core) for enhanced image handling

Similar projects

Several Drupal modules provide image hotspot functionality, but Image Hotspot Agent focuses on providing a modern, editor-friendly paragraph-based workflow with flexible display modes and rich content support.

Supporting this Module

Contributions, bug reports, and feature requests are welcome through the Drupal.org issue queue.

Community Documentation

Additional documentation, usage examples, and demos will be published as the project evolves.