Image Hotspot

Image Hotspot

Image Hotspot

An image hotspot interactive allows users to click on specific areas (hotspots) within an image to reveal additional information or media. This enhances user engagement by providing an intuitive and visually appealing way to explore detailed content within an image.

Here is a short video on how Image Hotspot works:



How to create Image Hotspot Interactive:

To create an Image Hotspot Interactive, follow these steps:
  1. Click on the "Create" button located in the Image Hotspot Interactive section.
  2. You will be redirected to the page mentioned below, where you can start building your Image Hotspot Interactive.
 




Once the form is open, you'll find the following fields to fill out:
  1. Enter your Interactive title to label your Image Hotspot activity.

  2. Then, choose a visually rich base image where users can click on hotspots to reveal more information or media, making the experience more interactive and engaging.

  1.  When the user clicks “Click here to add an image,” they’ll see all images already uploaded to the Editor.

  2. If they want to use course images inside Loree Interactives, they’ll need to upload them as new files first.







  1.  The “Click to upload a new interactive image” option lets users upload any image they want to include in their interactive.

  2. They can also use the External Image Link option to add an image directly from a URL.

  1. After adding an image, users can click on the 'Add/Edit Hotspot' button to open a new window, allowing them to add, edit, or delete hotspots in their desired positions.

  2. Clicking on the 'Add' option opens another window called 'Add Hotspot', requiring users to add a Label and Content to the hotspot using the bubble menu editor.

  3. Once the hotspot is added, it can be edited and saved by clicking the Save option.
 


 
 Users can preview their work using the PREVIEW option, now located at the top right side of the form section

Info
Please Note: We’ve also improved the hotspot pop-up behavior. If your content is larger, the pop-up height now adjusts dynamically. It can expand smoothly up to 800 pixels without showing a scrollbar. If the content goes beyond that limit, a scroll bar appears inside the modal so everything stays readable and accessible.

Add Section for Image Hotspot:
  1. The Image Hotspot form includes collapsible sections for easy organization.
  2. To add a new section, click Add Section, and a plus icon will appear on the section line showing Add Section Below.
  3. Once a section is added, you can move it up or down using the arrow icons to place it exactly where you want; no manual dragging is needed.
  4. To delete a section, click the Delete icon and confirm by selecting Remove in the pop-up window.




Notes
Please Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).

Customize Options:

Customization options in the Image Hotspot interactive allow users to personalize fonts, colors, styles, and spacing, enhancing visual appeal and usability tailored to specific preferences or branding needs.
  1. Icon: Icon customization for image hotspots enables users to select or upload icons representing points of interest in an image. These icons can be customized in type, size, color, and background color to integrate seamlessly with the design and improve usability.

    1.  1. Type: You can customize your hotspot icons in several ways. Choose the icon type to mark clickable points on your image and guide users visually. 

      2. Icon Size      : Adjust the icon size anywhere from 6 to 72 using the dropdown menu.

      3. Icon Color: Update the icon color to match your branding or improve visibility, using either the color palette or Hex and RGBA codes.

      4. Background Color: You can also change the background color behind the icon for extra contrast, with the same easy color selection options


THANK YOU!


    • Related Articles

    • Image/Video Slider

      Image/Video Slider An image/video slider is a dynamic user interface element commonly found on websites, featuring a carousel or slideshow format to display multiple images or videos in a single area. It allows users to view content sequentially ...

    • How do I add an image?

      Images As a Loree Design user, selecting the images option will now give you multiple pre-defined options, which easily add images, images with text, or both in combination. Selecting one of the options below will add the content to the particular ...

    • Release notes for Loree A2403.4

      Published on: 22/08/2024 Feature Enhancements Replace/Remove Image Option for Image Slider, Drag and Drop, and Hotspot Interactives Earlier Loree interactives did not have the option to replace images, which made it difficult for clients to change ...

    • Loree Interactives

      Loree Interactive content engages its consumers by requiring active participation. This type of content fosters better interaction between the creator and the audience, making learning easier and more interesting. It presents concepts in an engaging ...

    • Release notes for Loree A2502.1

      Published on: 16/05/2025 Feature Enhancements Background Color Inheritance for Iframes in Interactives Previously, when applying a background color (e.g., red) to a row containing an iframe-based interactive, the iframe would ignore the color and ...