Totally confused with the textfield plugin

spyboy · October 8, 2009 at 1:06 AM

I've been searching the forums for a few hours trying to find examples specific to my issues, but no luck.

I have a pano with 5 hot spots over products

I want to have the textfield plugin display a single box with product description centered at the bottom of the screen

it only appears when a user mouses over the hot spot (but then it remains up until a user closes the box)

if they mouse over a 2nd hot spot, all of the text changes in the product description box

is this possible? Any examples?

Thanks

Kirk

michel · October 8, 2009 at 3:16 AM

Hi spyboy,

Here an example:

Code

<krpano version="1.0.8" onstart="" >
	
	<preview type="grid(cube,32,32,256,0x000000,0x778899,0x000000);" details="8" />
		
	<hotspot name="hotspot_1"
	     	keep="false"
	     	visible="true" enabled="true" handcursor="true" capture="true" children="true"
	     	fillcolor 	="0xffff00" fillalpha 	="0.30" borderwidth 	="3.0" bordercolor 	="0xffff00" borderalpha 	="0.80"
	     	fillcolorhover="0xffffff" fillalphahover="0.10" borderwidthhover="0.0" bordercolorhover="0xffffff" borderalphahover="0.00"
	     	fadeintime="0.150" fadeouttime="0.300" fadeincurve="1.100" fadeoutcurve="0.700"
	     	onhover="showtext(hotspot_1);"
	     	onover="set(plugin[htmltext].html,data:html_hotspot_1); set(plugin[htmltext].backgroundcolor,0xFFFFFF); action(showwindow,htmltext);"
		>
		<point ath=" -10" atv="-10" />
		<point ath=" -10" atv="10" />
		<point ath=" 10" atv="10" />
		<point ath=" 10" atv="-10" />
	</hotspot>
	
	<hotspot name="hotspot_2"
	     	keep="false"
	     	visible="true" enabled="true" handcursor="true" capture="true" children="true"
	     	fillcolor 	="0xffff00" fillalpha 	="0.30" borderwidth 	="3.0" bordercolor 	="0xffff00" borderalpha 	="0.80"
	     	fillcolorhover="0xffffff" fillalphahover="0.10" borderwidthhover="0.0" bordercolorhover="0xffffff" borderalphahover="0.00"
	     	fadeintime="0.150" fadeouttime="0.300" fadeincurve="1.100" fadeoutcurve="0.700"
	     	onhover="showtext(hotspot_2);"
	     	onover="set(plugin[htmltext].html,data:html_hotspot_2); set(plugin[htmltext].backgroundcolor,0xFFAAAA); action(showwindow,htmltext);"
		>
		<point ath=" -50" atv="-10" />
		<point ath=" -50" atv="10" />
		<point ath=" -30" atv="10" />
		<point ath=" -30" atv="-10" />
	</hotspot>
	
	<hotspot name="hotspot_3"
	     	keep="false"
	     	visible="true" enabled="true" handcursor="true" capture="true" children="true"
	     	fillcolor 	="0xffff00" fillalpha 	="0.30" borderwidth 	="3.0" bordercolor 	="0xffff00" borderalpha 	="0.80"
	     	fillcolorhover="0xffffff" fillalphahover="0.10" borderwidthhover="0.0" bordercolorhover="0xffffff" borderalphahover="0.00"
	     	fadeintime="0.150" fadeouttime="0.300" fadeincurve="1.100" fadeoutcurve="0.700"
	     	onhover="showtext(hotspot_3);"
	     	onover="set(plugin[htmltext].html,data:html_hotspot_3); set(plugin[htmltext].backgroundcolor,0xAAAAFF); action(showwindow,htmltext);"
		>
		<point ath=" 50" atv="-10" />
		<point ath=" 50" atv="10" />
		<point ath=" 30" atv="10" />
		<point ath=" 30" atv="-10" />
	</hotspot>
			
	<plugin name="htmltext" url="%SWFPATH%/plugins/textfield.swf" 
	    	align="bottom" width="400" height="300" x="" y="" visible="false"
	    	html=""
	    	css="data:css1"
	    	roundedge="0"
	    	borderwidth="1"
	    	bordercolor="0xFFFFFF"
	    	backgroundcolor="0xFFFFFF"
	    	selectable="false"
	    	shadow="5"
	    	autosize="center"
	    	onclick="action(hidewindow,htmltext);"
	    	/>	
			
	<data name="html_hotspot_1">
		<p align="center">
			<br/>This is the text to be displayed when <b>hotspot_1</b> is clicked<br/>
			The text comes from [data name="html_hotspot_1"]<br/><br/>
			<a href="event:action(hidewindow,htmltext);">close window</a><br/>
		</p>
	</data>	   	
	
	<data name="html_hotspot_2">
		<p align="center">
			<br/>This is the text to be displayed when <b>hotspot_2</b> is clicked<br/>
			The text comes from [data name="html_hotspot_2"]<br/><br/>
			<a href="event:action(hidewindow,htmltext);">close window</a><br/>>
		</p>
	</data>	   
	
	<data name="html_hotspot_3">
		<p align="center">
			<br/>This is the text to be displayed when <b>hotspot_3</b> is clicked<br/>
			The text comes from [data name="html_hotspot_3"]<br/><br/>
			<a href="event:action(hidewindow,htmltext);">close window</a><br/>
		</p>
	</data>	   
		
	<data name="css1">
		a   	{ text-decoration:underline;  color:#110088;  font-weight:bold; }
		a:hover { color:#885500; }
	</data>
   
	<action name="showwindow">
		set(plugin[%1].enabled,true);
		tween(plugin[%1].alpha,1);
		tween(plugin[%1].blur,0);
		tween(plugin[%1].textblur,0,,,set(plugin[%1].visible,true));
	</action>
	
	<action name="hidewindow">
		set(plugin[%1].enabled,false);
		tween(plugin[%1].alpha,0);
		tween(plugin[%1].blur,20);
		tween(plugin[%1].textblur,20,,,set(plugin[%1].visible,false));
	</action>
	
</krpano>

Display More

There is 3 hotspot , 1 textfield plugin and 3 data with the html to be displayed for each hotspot. When onover an hotspot, an action is called to set the html value for the textfield plugin...

Code

onover="set(plugin[htmltext].html,data:html_hotspot_3);

Hope this is what you was looking for.

Salut.

Edited: added an <action name="showwindow"> on the code...

spyboy · October 8, 2009 at 3:50 AM

Excellent! Thank you very much!

Kirk

Totally confused with the textfield plugin

Participate now!

Users Viewing This Thread