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.
This process will add an Image type hotspot. This means that the image pops up to open; it is not pinned and visible like if you were to add an image via the Images Mode
Instead, an image icon will be seen. When you click on this icon, an image pops up. The image icon comes from the skin. The hotspot and the image icon in the skin are connected via a hotspot template and a Skin-ID.
The easiest way to get an image hotspot icon, is to use one of the built-in skins or the installed Components found in the Components Toolbox. They both have hotspot templates with image icons for pop-up images.
-
Open a project or import a panorama.
-
Select the Point Hotspot Viewer Mode from the Viewer Modes or hit P on the keyboard.
-
Drag in the image for the pop-up and drop on to the Viewer. It will be automatically added as a hotspot that links to an image. The hotspot’s properties will open. There you’ll see the hotspot set to an Image type and the Skin-ID already added.
You could output this from here, but the image won’t pop up. Rather, when you click on the hotspot, 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.
-
Open the Output panel and add a Web output.
-
Add a skin. ★ All built-in skins have icons/buttons for image popups.
-
Save the project and output it. There will now be a graphic icon representing images. When it’s clicked, it’ll open the added image.
You can also add components to an existing skin.
- Open the Components Toolbox, find the Built-in Components.
- Select a Category. For example, Material.
- Double-click on Material Dart Point Hotspots. This component supports all point hotspot types, so they will be added to your skin. You can remove the ones you will not use.
- Save the skin.
Another option is to use the Custom Image feature. This is useful if you don’t want to add or edit a skin. Instead, add your icon to the Custom Image parameter of the point hotspot settings. This image is not propagated to all image-type hotspots.
✭ 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).