How to display small thumbnail image with the onhover method?

andrew22222

Fortgeschrittener

Beiträge: 397

Wohnort: Australia

1

Dienstag, 27. April 2010, 02:52

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

Quellcode

<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

Zum Seitenanfang

Graydon

Profi

Beiträge: 614

Wohnort: Texas

Beruf: Industrial gas turbine services.

2

Dienstag, 27. April 2010, 08:28

Quellcode

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

Graydon

Marlin Creek
Marlincreek.com
graydon@marlincreek.com

Zum Seitenanfang

andrew22222

Fortgeschrittener

Beiträge: 397

Wohnort: Australia

3

Dienstag, 27. April 2010, 23:57

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

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

Quellcode

<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

Zum Seitenanfang

Jarredja

Profi

Beiträge: 1 058

Wohnort: LA

4

Mittwoch, 28. April 2010, 00:08

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

Zum Seitenanfang

andrew22222

Fortgeschrittener

Beiträge: 397

Wohnort: Australia

5

Mittwoch, 28. April 2010, 01:30

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

Zum Seitenanfang

Graydon

Profi

Beiträge: 614

Wohnort: Texas

Beruf: Industrial gas turbine services.

6

Mittwoch, 28. April 2010, 06:47

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

Marlin Creek
Marlincreek.com
graydon@marlincreek.com

Zum Seitenanfang

Graydon

Profi

Beiträge: 614

Wohnort: Texas

Beruf: Industrial gas turbine services.

7

Mittwoch, 28. April 2010, 07:09

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

Quellcode

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

Graydon

Marlin Creek
Marlincreek.com
graydon@marlincreek.com

Zum Seitenanfang

andrew22222

Fortgeschrittener

Beiträge: 397

Wohnort: Australia

8

Mittwoch, 28. April 2010, 18:04

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

Zum Seitenanfang

Graydon

Profi

Beiträge: 614

Wohnort: Texas

Beruf: Industrial gas turbine services.

9

Donnerstag, 29. April 2010, 07:12

Glad to help and get you on the right path.

Graydon

Marlin Creek
Marlincreek.com
graydon@marlincreek.com

Zum Seitenanfang

tommo77funk

Fortgeschrittener

Beiträge: 159

Wohnort: London

Beruf: Photographer

10

Donnerstag, 21. April 2011, 00:13

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

Zum Seitenanfang

VN2011

Profi

Beiträge: 1 336

Wohnort: Duluth MN

11

Donnerstag, 21. April 2011, 01:43

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.

Zum Seitenanfang

tommo77funk

Fortgeschrittener

Beiträge: 159

Wohnort: London

Beruf: Photographer

12

Donnerstag, 21. April 2011, 09:07

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

Zum Seitenanfang

simplify

Anfänger

Beiträge: 30

13

Freitag, 2. Juni 2017, 13:32

this is my way

Quellcode

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

Zum Seitenanfang