Having an image Point Hotspot but to open a pinned image as the fly out transition is quite cool.
- popout.gif (3.36 MiB) Viewed 340 times
So what you do is add a pinned image which is hidden, then place a permeable Point Hotspot over it to give a visual point to click.
How:
To start open the skin editor and add a Hotspot Template with an icon as a Child element, in this case an SVG from the components toolbox.
Note the Hotspot Templates ID.
In this example it is ht_popoout, this will be used when adding the hotspots in the viewer later.
The Hotspot Template ht_node will be used to change nodes.
- 1.png (30.59 KiB) Viewed 341 times
Select the SVG and under its properties panel select Permeable as found under the Advanced tab.
- 2.png (45.33 KiB) Viewed 341 times
Now add the pinned image in the viewer, use these settings:
(1) Click Mode Popout 100%, this makes it responsive
(2) Hide when pinned
(3) Hand Cursor, so when you Mouse over the area the mouse changes to the hand showing the user there is something to click
(4) Set FoV to 3, I'm using a Point Hotspot Icon size of 40 x 40px so this is about right size, if your Point Hotspot Icons are different sizes then adjust the FoV
- 3.png (89.23 KiB) Viewed 341 times
Now add a Point Hotspot in the viewer and position it over the pinned image.
- 4.png (13.57 KiB) Viewed 341 times
In the Point Hotspot Properties make sure you add the correct Template, in this example, ht_popout.
- 5.png (62.34 KiB) Viewed 341 times
That's it, when you open the output the Image Point Hotspot is permeable so when you mouse over it, it is the pinned image Hand Cursor that actually changes the mouse pointer.
When you click the image pops out 100%, using the cool Fly Out transition as it does so it becomes visible.
Click anywhere in the player to hide it again using the transition.
Download the project.
Regards,