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 a 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. Interactive Title: Title or name input for your Image Hotspot interactive,     prominently displayed or used as a label.
  2. Image: Involves selecting a visually rich base image where users can click designated hotspots to reveal additional information or media, enhancing interactive exploration.


When the user clicks on click here to add an image option in a section, it will display all the existing uploaded images already inside the Editor platform.

If users want to use their course images in Loree Interactives, they need to upload them as new ones.







The image below shows the 'Click to upload a new interactive image' option that allows users to upload images of their choice into the interactive.

Users can even use the 'External Image Link' option to add an image URL directly. 

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








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.

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



Add Section for Image Hotspot:

  1. The Image Hotspot form comes with collapsible sections. You can easily add a section by clicking on the 'Add Section' button, allowing users to add a section below the existing one.
  2. As soon as a new section is added, a + icon appears on the Section Line indicating 'Add Section Below'. Refer to the images for details.
  3. Once a section is added, users can move it up or down to position it above or below desired sections without manual dragging, using the up or down arrow icons.
  4. To delete a section, simply click the 'Delete' icon on the Section Line. Confirm deletion in the 'Remove Section' window by clicking 'Remove'.




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. Type: Icon types in image hotspots are graphical symbols used to mark specific points within an image, enhancing user interaction by providing visual cues for clickable areas where additional content or information can be revealed. See available icon types in the image below:

      Icon Size: Adjust the size of icons in image hotspots. Options range from 6 to 72, selectable from a dropdown menu.

      Icon Color: Customize the color of icons to improve readability, emphasize key information, or align with branding. Use the color palette to choose a color, or input Hex or RGBA codes for precise color matching.

      Background Color: Modify the background color behind icons to enhance visibility and emphasis. Accessible through the color palette menu, select a color or enter specific Hex or RGBA codes for customization.

Preview:

The PREVIEW option has been conveniently placed on the far right side corner of the form section for all the interactives.

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

    • 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 A2403.1

      Published on: 17/07/2024 LOREE INTERACTIVES REVAMP! We're excited to announce the release of our revamped Interactive Tool. This update brings enhanced functionality, improved user experience, and new features designed to help you get the most out of ...

    • Release Notes for Loree A2403.2

      Published On: 29/07/2024 Feature Enhancements 1. Extra Canvas Tags Support Previously, users of Loree encountered difficulties when key components such as summaries and details vanished from pages because of unsupported tags. We have now enhanced ...