You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

andrew22222

Intermediate

  • "andrew22222" started this thread

Posts: 354

Location: Australia

  • Send private message

1

Tuesday, April 27th 2010, 2:52am

How to display small thumbnail image with the onhover method?

Hi,

I'm about to take on a task of creating a virtual tour to be presented on a CD/DVD. The tour loads with just one aerial 360 degree image and this will contain approx 25 hotspots to load other 360 degree images.I guess there will have to be a main 'HOME' button added so that people can get back to the main aerial 360.

I've used hotspots before and also onhover=showtext to display the labels but on this occasion I would like to display a small thumbnail image with the onhover method. This way the viewer can see a brief preview and then clicking loads the 360 shot. I'll make 25 separate framed thumbnails for this.

Could anyone please point me in the direction of getting the thumbnails to show please?


Here's the code below that I will be using

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<hotspot name="hs0"
     keep="false"
     visible="true" enabled="true" handcursor="true" capture="true" children="true"
      zorder="0"     fillcolor ="" fillalpha ="0.00" borderwidth ="0.0" bordercolor ="" borderalpha ="0.00"
     fillcolorhover="" fillalphahover="0" borderwidthhover="0" bordercolorhover="" borderalphahover="0"
     fadeintime="0.150" fadeouttime="0.300" fadeincurve="1.100" fadeoutcurve="0.700"
     onover=""
     onhover="showtext(SANDRINGHAM PARK ,labels)"     ******** Possible to display a small thumbnail image instead of text?  *************
     onout=""
     ondown=""
     onup=""
     onclick=""
     flying="0"
> 
 
<point ath="168.6922" atv=" 14.0703" />
<point ath="162.3554" atv=" 13.3177" />
<point ath="163.3692" atv=" 16.7117" />
<point ath="166.9322" atv=" 17.3465" />
</hotspot>



Many thanks,

Andrew

Graydon

Professional

Posts: 614

Location: Texas

Occupation: Industrial gas turbine services.

  • Send private message

2

Tuesday, April 27th 2010, 8:28am

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<hotspot name="hs0"
...
onhover="showtext(SANDRINGHAM PARK ,labels);action(show_hover_image,hs0,path/to/thum.jpg);"
...
</hotspot>

<action name="show_hover_image">
	set(plugin[hover_image].parent,hotspot[%1]);
	set(plugin[hover_image].url,%2);
</action>

<plugin name="hover_image"
url=" "
parent=" "
align="righttop"
edge="leftbottom"
x="#" y="#"
...
/>


That may not be 100% correct... but it hopefully will get you on the correct path.

Your onhover will now show the text as well as call the show_hover_image action and passes two variables to that action. The show_hover_image action dynamically sets two parameters (parent and url in the plugin "hover_image") that were passed to it from the onhover call. The first one listed "hs0" is put in for %1 and "path/to/thum.jpg" is put in for %2.

You will need to experiment with the align / edge / x / y and if needed ox and oy so that your hover_image shows in an agreeable location.

This wasn't tested... but I've worked on something similar... so "in theory" it should work.

Let us know.

andrew22222

Intermediate

  • "andrew22222" started this thread

Posts: 354

Location: Australia

  • Send private message

3

Tuesday, April 27th 2010, 11:57pm

Thanks for your reply Graydon and the sample code. It certainly looks the part but unfortunately I can't get it to work. Tried many different combination's but get the following error message

Source code

1
2
WARNING: not local trusted - ExternalInterface disabled!
ERROR: no parent "hs0" found   


Not sure if that is because I'm viewing the tour locally but that is how it will be presented from a CD so I'm out of luck if it is the cause.

The thumbnail shows straight away though and stays there when the 360 shot loads and then when I mouse over the hotspot the 'text' appears and hides the thumbnail in the same process.

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<hotspot name="hs0"
     keep="false"
     visible="true" enabled="true" handcursor="true" capture="true" children="true"
      zorder="0"     fillcolor ="" fillalpha ="0.00" borderwidth ="0.0" bordercolor ="" borderalpha ="0.00"
     fillcolorhover="" fillalphahover="0" borderwidthhover="0" bordercolorhover="" borderalphahover="0"
     fadeintime="0.150" fadeouttime="0.300" fadeincurve="1.100" fadeoutcurve="0.700"
     onover=""
     onhover="showtext(SANDRINGHAM PARK,labels);action(show_hover_image,hs0,thumbnails/sandringham.png);"
     onout=""
     ondown=""
     onup=""
     onclick=""
     flying="0"
> 
 
<point ath="168.6922" atv=" 14.0703" />
<point ath="162.3554" atv=" 13.3177" />
<point ath="163.3692" atv=" 16.7117" />
<point ath="166.9322" atv=" 17.3465" />
</hotspot>


<action name="show_hover_image">
set(plugin[hover_image].parent,hotspot[%1]);
set(plugin[hover_image].url,%2);
</action>

<plugin name="hover_image"
url="thumbnails/sandringham.png"
parent="hs0"
align="righttop"  
x="100" y="100"
/>



Certainly one of those things that'll keep me scratching my head for a while ;-)

Andrew

4

Wednesday, April 28th 2010, 12:08am

I would think a plugin could not be a child of a hotspot. Maybe i'm wrong.

andrew22222

Intermediate

  • "andrew22222" started this thread

Posts: 354

Location: Australia

  • Send private message

5

Wednesday, April 28th 2010, 1:30am

Jarredja,

You might be onto something there ;-)

I'm going to make plugins for the markers instead of using hotspots and adjust the code a little. Might get this to work.

Thanks

Andrew

Graydon

Professional

Posts: 614

Location: Texas

Occupation: Industrial gas turbine services.

  • Send private message

6

Wednesday, April 28th 2010, 6:47am

A plugin can be a child of a hotspot (had to search the forum to confirm)... but it looks like you can't use a multi-point hotspot as a parent.

If you change the hs0 to a image hotspot with just an "ath" and "atv" then the child will show. Makes sense I guess since a multipoint hotspot may no longer have a easily defined "center" or edge to align to. An image hotspot will have set edges and such to align the child to.

Another oversight on my part is that you don't want to use the onhover to drive your action for the "show_hover_image"... as onhover repeatedly calls the action.

You will want to use the onover (no 'h') to turn on the thumb and the onout to hide it again... which adds a bit more complexity... but if you jot down the sequence of steps that you want to happen it will be easier to write up.

onover:
- set thumb image parent to current hotspot
- set thumb image url
- make thumb image visible

onout:
- make thumb image hidden

Sorry to have led you astray some there.

Graydon

Professional

Posts: 614

Location: Texas

Occupation: Industrial gas turbine services.

  • Send private message

7

Wednesday, April 28th 2010, 7:09am

Here's some tested code that is working...

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<hotspot name="hs0"
	url="down.png"
	ath="45" atv="0"
 	keep="false"
 	visible="true" enabled="true" handcursor="true" capture="true" children="true"
 	zorder="1"
 	onover="action(show_hover_image,hs0,down.png);"
 	onhover="showtext(SANDRINGHAM PARK);"
 	onout="action(show_hover_image,hs0,null);"
 	ondown=""
 	onup=""
 	onclick=""
 	flying="0"
/> 

<hotspot name="hs1"
	url="down.png"
	ath="-45" atv="0"
 	keep="false"
 	visible="true" enabled="true" handcursor="true" capture="true" children="true"
 	zorder="1"
 	onover="action(show_hover_image,hs1,up.png);"
 	onhover="showtext(something);"
 	onout="action(show_hover_image,hs1,null);"
 	ondown=""
 	onup=""
 	onclick=""
 	flying="0"
/> 

<action name="show_hover_image">
set(plugin[hover_image].parent,hotspot[%1]);
set(plugin[hover_image].url,%2);
</action>

<plugin name="hover_image"
url=""
parent=""
align="righttop" edge="leftbottom"  
x="0" y="0"


I'm just using random images that I have readily available in a test area... you'll obviously need to change them for your purposes.

Instead of "hiding" the hover_image onout.... just set it's url to 'null' which seems to work.

andrew22222

Intermediate

  • "andrew22222" started this thread

Posts: 354

Location: Australia

  • Send private message

8

Wednesday, April 28th 2010, 6:04pm

Holy Chow!

Thanks Graydon. Certainly appreciate the effort you put into getting this up and running. I had spent three hours yesterday afternoon on it an managed to get things going but the hover_image was flickering like crazy if it appeared over the hotspot marker plus I had to many actions. Not to worry though as your version is way better as there is just one action group and I can just adjust the onover="action(show_hover_image,hs1,thumbnails/sandringham.png);" for each hotspot I make.

Excellent. *smile*

I enjoyed trying to work it out but it's so time consuming when you don't have a good understanding of it.

Thanks again,

Andrew

Graydon

Professional

Posts: 614

Location: Texas

Occupation: Industrial gas turbine services.

  • Send private message

9

Thursday, April 29th 2010, 7:12am

Glad to help and get you on the right path.

tommo77funk

Intermediate

Posts: 158

Location: London

Occupation: Photographer

  • Send private message

10

Thursday, April 21st 2011, 12:13am

How to display small thumbnail image with the onhover on a polygon hotspot

Hi,

This is great code from Graydon, and is exactly what i need, however for a polygon hotspot. I have coded an example between with image hotspot and polygon. I'd be really grateful if anybody has any ideas on why it does not work for a polygon hotspots and what I might do to solve it.

e.g. http://bit.ly/gJuRWD

Thanks and best wishes,

tom

VN2011

Professional

Posts: 1,336

Location: Duluth MN

  • Send private message

11

Thursday, April 21st 2011, 1:43am

there must be an issue setting a polygon hotspot as parent if you change the onhover to the polygon to hs0 it does show over the other image. it must not know where to land i tried adding an atv and ath value for the child to use and that did not work either.

tommo77funk

Intermediate

Posts: 158

Location: London

Occupation: Photographer

  • Send private message

12

Thursday, April 21st 2011, 9:07am

Thanks VN2011, your time to look and confirm is greatly appreciated. I wonder if it is a bug or there is another way to make the effect for polygons - i will keep trying today.

Many thanks again and great wishes !!

tom

13

Friday, June 2nd 2017, 1:32pm

this is my way

Source code

1
2
3
4
5
6
7
<hotspot name="spot5555" style="skin_hotspotstyle2" ath="36.7" atv="13.6" distorted="false" zoom="false" linkedscene="scene_xuechang-bottom"/>
<style name="skin_hotspotstyle2" url="tunnel.png" scale="1" edge="bottom" y="20" distorted="false"	scalechildren="true"	tooltip=""	linkedscene=""	linkedscene_lookat=""	onclick="skin_hotspotstyle_click();"	onover="tween(scale,1.02);tween(oy,-10)"	onout="tween(scale,1);tween(oy,0)"	onloaded="add_all_the_time_tooltip_bottom();get_the_thumb();"
	/>		<action name="get_the_thumb">	txtadd(roundthumbname, 'roundthumb_', get(name));	addlayer(get(roundthumbname));	txtadd(layer[get(roundthumbname)].parent, 'hotspot[', get(name), ']');	txtreplace(roundthumburl,scene[get(linkedscene)].thumburl,'thumb.jpg','thumb1.png');	copy(layer[get(roundthumbname)].url, roundthumburl);
	set(layer[get(roundthumbname)].align,center);	set(layer[get(roundthumbname)].edge,bottom);
	set(layer[get(roundthumbname)].x,0);	set(layer[get(roundthumbname)].y,20);	set(layer[get(roundthumbname)].width,56);	set(layer[get(roundthumbname)].height,56);	set(layer[get(roundthumbname)].linkedscene,get(linkedscene));
	set(layer[get(roundthumbname)].onclick,skin_hotspotstyle_click_roundthumb(); callwith(hotspot[get(name)],onclick););		</action><action name="skin_hotspotstyle_click_roundthumb">	       	       if(linkedscene,	       if(linkedscene_lookat,	       txtsplit(linkedscene_lookat, ',', hs_lookat_h, hs_lookat_v, hs_lookat_fov);	       );	       set(enabled, false);	       skin_hidetooltips();
	       tween(depth|alpha|oy|rx|scale, 4000|0.8|0|-60|1.0, 0.5, default,	       skin_loadscene(get(linkedscene), get(skin_settings.loadscene_blend));	       if(hs_lookat_h !== null,	       skin_lookat(get(hs_lookat_h), get(hs_lookat_v), get(hs_lookat_fov));	       delete(hs_lookat_h, hs_lookat_v, hs_lookat_fov);	       );	       skin_updatescroll();	       );	       );	       </action>

simple to understand and easy to use~ *smile*

Similar threads