Image popup hotspot

Q&A about the latest versions
Post Reply
Posts: 4
Joined: Fri Jan 15, 2010 2:45 pm

Fri Jan 15, 2010 2:51 pm

Hi. I've been watching all the tutorials, reading through the forum, and trying things out - but I can't seem to get this to work.
I need to test a pano with a bunch of tables in it. When the mouse hovers over a table, it needs to popup an image. And when you move away, the image disappears again. I think this software should be able to perform this function.
It sounds like it would be a simple thing to do, however I'm confused.
Is there a step-by-step method to do this? Thanks.
Posts: 4
Joined: Fri Jan 15, 2010 2:45 pm

Fri Jan 15, 2010 5:05 pm

Also, how does one make a point hotspot area (like an area hotspot) larger while keeping that crossair icon hidden?
Posts: 4
Joined: Fri Jan 15, 2010 2:45 pm

Fri Jan 15, 2010 8:47 pm

Nope - watched all of those.

Let me clarify - what I mean by "tables" is actual physical tables - like the kind you eat at lol.
Normally, if I was to take a circle area hotspots and lay them over those tables, then fill in the titles - as your mouse went over the panorama and tables, a text "tooltip" would appear with the title in it.

I'm looking to do the same thing, but instead of a text tooltip, I just want it to display small pictures instead.
User avatar
Posts: 11308
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK

Sat Jan 16, 2010 11:51 am

Step 1
Define area hotspot. The first one will be No. 1 the second will be No. 2and so on.

Step 2
Now in the skin add all your thumbnail images. If they have square corners and do not need to have transparency, then you are advised to import then as jpg and not png images, this will reduce your file size of the skin, big time.
Note: If you want to click the image to close it then import them as buttons as this will make the mouse change to the hand symbol.

Step 3
Set the images to either not visible or alpha 0, depending weather you want them to appear or fade in, alpha will fade.

Open the Actions / Modifiers tab for the image.
Set the action, mouse enter, show element $self, or Change element alpha 1 $self.
Mouse leave, Hide element $self, or Change element alpha 0 $self.

Now set the modifiers:

Move X, Mouse X
Move Y, Mouse Y
No need to alter anything else.

Go back to the settings tab for the image and set the following on the understanding that the images will be 50 x50px.

Position X: -25 Y: -55

Y, this moves the image up 55px, so it will end up being 5px above the mouse, and X moves the image so the mouse is half way across the image. To move the image to the left of the mouse you would set the x to -55.

Step 4
In the Hotspot Proxy text field enter the number of the area hotspot, so for the first table area hotspot this will be 1.

The above settings will need to be entered for each thumbnail.

What will happen is when your mouse enters an area hotspot, the proxy ID will make a link to the image and execute the actions in it.

In this case
Mouse enter show or alpha
Mouse leaves hide or alpha
The modifiers means the images will track the mouse.

Kind regards
Hopki :)
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
Posts: 4
Joined: Fri Jan 15, 2010 2:45 pm

Sat Jan 16, 2010 2:55 pm

Wow thank you so much for the help here. I think I was confused by not using "mouse enter" - I was trying to do a hover instead. I also would have never thought to do the Move modifiers either. Thank you again Hopki - much appreciated.
Posts: 14
Joined: Thu Jan 21, 2010 1:48 am

Sun Apr 18, 2010 5:58 pm

Hello Everyone,

I've been working on this concept to have an image popup for 3 hours and have followed the instructions but can get it to work. I've tried to attach an image to the area hotspot in the skin editor but it doesn't work. Basically I would like to have this concept in a workflow that works and is easy to understand.

Thanks in advance,

Post Reply