Skip to main content

Create custom hotspot images

If you want to take your hotspots to the next level, you can create a skin for your hotspots and add custom hotspot images using Hotspot Templates and then add actions to them.

After you have added your hotspots in the Viewer, open the Skin Editor and follow the steps to add a custom image.

Add the custom image

  1. Open the Skin Editor.

  2. Click on the hotspot template button in the Toolbar and click in the Canvas to add a hotspot template.

    Click Hotspot Template Button

    This template acts as a placeholder and affects only point hotspots. The crosshair image will not be visible in the skin. You can place the template anywhere, as its placement on the skin is arbitrary.

  3. Add the hotspot image.

    This can be a JPEG, PNG, GIF (static) or SVG.

    If you drag the image to the Canvas, it will be imported as an Image element. You can convert an image to a button in its properties panel.

  4. Place the image on top of the hotspot template (the crosshairs) in the canvas.

  5. Make the image a child of the template.

    Image a child of template.

Add actions for interactivity

Add actions to the hotspot template to have it call up information added in the Hotspot Properties:

  1. Select the Hotspot Template and go to its Actions panel. Add the following action for opening a webpage:

    → Source = Mouse Click

    → Action = Go To URL

    → URL = $hu (This placeholder will call up the information added to the Link Target URL in the hotspot properties.)

    → Target = $ht (This placeholder will call up the information added to the Target field in the hotspot properties.)

  2. Give the template a descriptive name. This example could be called something like go_URL.

  3. Save the skin.

✭ To see a working example, check out one of the skin components called Web link. You could also simply use this component and swap out the image by selecting the existing image and in it’s properties, click Change.

Connect the Hotspots to the Skin

The final step is to make sure the hotspots are linked to the Hotspot Templates in the skin.

  1. Add the skin you’ve created to the project by choosing it in the Output properties.

  2. In, the Viewer, select a hotspot to open its properties.

  3. For the Skin-ID, choose the template you’ve created in the previous steps.

  4. Output the project.


See also

2017-07-13 06:13:47