You are not logged in.

Very beginner question ! but not in examples...

olivier

Beginner

  • "olivier" started this thread

Posts: 3

  • Send private message

1

Monday, January 14th 2013, 6:31pm

Very beginner question ! but not in examples...

hello,
i'd like to make a "simple" pano with hotspots.
But when i click on a hotspot, i would like to have "layer" (or a div, or a frame or wathever it could be) displaying HTML informations, like a popup (not jumping to another area). For instance, if i click on a flower in a pano, i want to be able to display the name, the species, all kind of informations AND photos of it (some HTML).
How would you do this ?
is it something to add in the xml or in the js ?
Thanks in advance.

tmhok

Intermediate

Posts: 171

  • Send private message

2

Tuesday, January 22nd 2013, 3:56am

Quoted from "olivier"

hello,
i'd like to make a "simple" pano with hotspots.
But when i click on a hotspot, i would like to have "layer" (or a div, or a frame or wathever it could be) displaying HTML informations, like a popup (not jumping to another area). For instance, if i click on a flower in a pano, i want to be able to display the name, the species, all kind of informations AND photos of it (some HTML).
How would you do this ?
is it something to add in the xml or in the js ?
Thanks in advance.

add

Source code

 
1

<plugin name="editor"  url="%SWFPATH%/plugins/editor.swf" keep="true"  />


then gen hotspot code automatically like image hotspot

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

<hotspot name="spot1" devices="all"
	         url="skin/vtourskin_hotspot.png"
	         keep="false"
	         ath="16.988" atv="2.76"
	         zoom="false" distorted="false" details="8" flying="0"
	         width="128" height="112"
	         scale="0.5" scale9grid="" scalechildren="false" rotate="0"
	         rx="0" ry="0" rz="0"
	         edge="top" ox="" oy="0"
	         crop="" ondowncrop="" onovercrop=""
	         visible="true" enabled="true" usecontentsize="false" handcursor="true" capture="true" children="true" maskchildren="false"
 	         zorder="0"
	         alpha="1.00" autoalpha="false" blendmode="normal" effect="" smoothing="true" pixelhittest="false"
	         refreshrate="auto"
 	         onloaded=""
	         onover=""
	         onhover=""
	         onout=""
	         ondown=""
	         onup=""
	         onclick="if(linkedscene, tween(scale,0.25,0.5); tween(oy,-20,0.5); tween(alpha,0,0.5); looktohotspot(); loadscene(get(linkedscene),null,MERGE,BLEND(1)); skin_updatescroll(); );"
	         bgalpha="0"
	         bgcapture="false"
	         bgcolor="0"
	         linkedscene="scene_a1kt"
	         type="image"
		>
	</hotspot>


or polygonal hotspot

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

<hotspot name="hs1" devices="all"
	         keep="false"
	         visible="true" enabled="true" usecontentsize="false" handcursor="true" capture="true" children="true" maskchildren="false"
 	         zorder="0"
	         fillcolor     ="0xffffff" fillalpha     ="0.00" borderwidth     ="0.0" bordercolor     ="0xffffff" borderalpha     ="0.00"
	         fillcolorhover="0xffffff" fillalphahover="0.10" borderwidthhover="4.0" bordercolorhover="0xffffff" borderalphahover="0.80"
	         fadeintime="0.150" fadeouttime="0.300" fadeincurve="1.100" fadeoutcurve="0.700"
	         onover=""
	         onhover=""
	         onout=""
	         ondown=""
	         onup=""
	         onclick=""
	         bgalpha="0"
	         bgcapture="false"
	         bgcolor="0"
	         type="image"
		>
		<point ath=" 24.7278" atv="  6.9091" />
		<point ath=" 23.7732" atv=" 12.0665" />
		<point ath=" 28.9287" atv=" 13.3020" />
		<point ath=" 27.8078" atv="  6.5071" />
	</hotspot>


write onclick like this

Source code

 
1

onclick="action(showtextfield, flower);"


add

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

 <data name="defaultcss">a { text-decoration:underline; color:#110088; font-weight:bold; } a:hover { color:#885500; }</data> 
<data name="html_flower">
<p align="left">
  <img src="flower.jpg" /> 
<font face="arial" size="+4">
<textformat leftmargin="10" rightmargin="10">
  <br /> 
  <b>Flower</b> 
  <br /> 
  <br /> 
flower sth blabla
  <br /> 
  <br /> 
 
  <br /> 
  <br /> 
  <br /> 
  
  <br /> 
  <br /> 
  <a href="event:action(hidetextfield,flower);">close</a> 
  </textformat>
  </font>
  </p>
  </data>
  <action name="showtextfield">tween(plugin[%1].alpha,0,0); set(plugin[%1].alpha,0); tween(plugin[%1].textblur,20,0); set(plugin[%1].textblur,20); tween(plugin[%1].blur,20,0); set(plugin[%1].blur,20); set(plugin[%1].enabled,true); set(plugin[%1].visible,true); tween(plugin[%1].alpha, 1, 0.25); tween(plugin[%1].textblur, 0, 0.25); tween(plugin[%1].blur, 0, 0.25);</action> 
  <action name="hidetextfield">set(plugin[%1].enabled, false); tween(plugin[%1].alpha, 0, 0.25, default, plugin[%1].set(visible,false)); tween(plugin[%1].textblur, 20, 0.25, default); tween(plugin[%1].blur, 20, 0.25, default);</action> 
  <plugin name="flower" visible="false" url="%SWFPATH%/plugins/textfield.swf" align="center" width="600" height="420" html="data:html_flower" css="data:defaultcss" background="true" />

Hadi

Beginner

Posts: 16

  • Send private message

3

Monday, January 28th 2013, 2:56pm

use following code to write the text you want

Hi,
you can use following code for hotspot, instead of : XXXXXXXXXXXXXXXXXX you can write the text you want.






<hotspot name="spot1" style="hotspot_ani_white"

ath="239"

atv="-3"

zoom="false"

onhover="showtext('XXXXXXXXXXXXXXXXXX-',hotspottextstyle);"

onclick="set(view.maxpixelzoom,null);

set(view.fovmin,30);
looktohotspot(get(name),20);

loadscene(scene_Warehouse_A, null, MERGE, BLEND(2));

lookat(356, 0, 80);

wait(LOAD);
oninterrupt(break);

wait(BLEND);

lookto(170, 1, 100, smooth(45,45,40));

"
/>

Similar threads