How to display small thumbnail image with the onhover method?

andrew22222 · April 27, 2010 at 2:52 AM

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

Code

<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>

Display More

Many thanks,

Andrew

Graydon · April 27, 2010 at 8:28 AM

Code

<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="#"
...
/>

Display More

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 · April 27, 2010 at 11:57 PM

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

Code

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.

Code

<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"
/>

Display More

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

Andrew

Jarredja · April 28, 2010 at 12:08 AM

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

andrew22222 · April 28, 2010 at 1:30 AM

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 · April 28, 2010 at 6:47 AM

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 · April 28, 2010 at 7:09 AM

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

Code

<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"

Display More

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 · April 28, 2010 at 6:04 PM

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.

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 · April 29, 2010 at 7:12 AM

Glad to help and get you on the right path.

tommo77funk · April 21, 2011 at 12:13 AM

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 · April 21, 2011 at 1:43 AM

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 · April 21, 2011 at 9:07 AM

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

simplify · June 2, 2017 at 1:32 PM

Code

<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~[size=10] *smile*[size=10]

Participate now!