Create custom hotspot images
Add the custom image
Open the Skin Editor.
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.
Add the hotspot image.
This can be as a button, image or SVG image. The button will automatically use the hand curser to indicate interactivity and will offer button states. The others will have a an option in the Appearance tab to change the cursor.
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 pane.
Place the image on top of the hotspot template (the crosshairs) in the canvas.
Make the image a child of the template.
Add actions for interactivity
Add actions to the hotspot template to have it call up information added in the Hotspot Properties:
Select the Hotspot Template and go to its Actions pane. Add the following action for opening a webpage:
→ Source =
→ 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.)
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.