Skip to main content

Add an Image Pop-up

Hotspots can be used to pop up images and to show information boxes. When Info and Image hotspots are added to a project, they can use a different skin graphic to represent them.

The easiest way to do this is to use the installed Components found in the Components Toolbox.

  1. Open a project or import an image.

  2. Select the Point Hotspot Viewer Mode.

  3. Drag in the image for the pop up and drop on to the Viewer. It will be automatically added as hotspot that links to an image.

    You could output this from here, but the image won’t pop up. Rather it would open in a separate browser window. Also, the hotspot image would be the default hotspot image. If you want the image to pop up in the same window and have a nice looking hotspot graphic, continue with the following steps.

  4. Open the Output panel and add the HTML5 output.

  5. Add a skin.

  6. Open the Skin Editor (Click the Edit Skin button).

  7. Open the Components Toolbox, find the Built-in Components.

  8. Double-click one of the Image Popup components to add it to the skin.

  9. Save and rename the skin.

  10. Output the project.

    You’ll now see an image graphic representing the point hotspot and when you click on it, the image pops up in the center of the screen. Click on the image again to hide it.

    Click to show
    Click image to hide

✭ You can use external images, too. Just drag in the image from a website (or URL) and the image will be added (so long the URL ends with an image extension).


See also

2017-06-14 11:34:31