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.

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. 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!