Du bist nicht angemeldet.

1

Montag, 16. Juni 2014, 16:46

Onhover Text in html5

Hallo Forum,

ich möchte gern für Hotspots und Steuerelemente einen Infotext bei Mausover anzeigen lassen. Das funktioniert auch in Flash. Aber nicht in der html5 Ansicht.

Wie kann ich es erreichen das der Text auch in html5 funktioniert?

Hab mir schon das Example "Tooltips" aus der aktuellen KrPano Version angesehen, aber komm nicht so recht klar. KrPano eben. Wäre echt dankbar für eure Hilfe

Vielen Dank vorab...

Grüße

Klaus

17.06.14 Hat keiner von den Experten hier eine Antwort? :?:
Das ist KEINE Signatur :D : Canon EOS 5D mkII, Canon EOS 600d, Canon EF 8-15, PT4PANO Rotator, Seitz Nodalpunktadapter

Dieser Beitrag wurde bereits 6 mal editiert, zuletzt von »imagizer« (30. Juni 2014, 17:10)


2

Mittwoch, 18. Juni 2014, 14:15

Hi,

bzgl. dem Tooltips Beispiel:

zuerst diesen Tooltip Code aus dem Tooltip Beispiel kopieren und in die eigene XML einfügen:
$this->cacheCode('[php]',' <!-- the 'tooltip' style - show tooltip textfield and update positions as long as hovering -->
<style name="tooltip"
onover="copy(layer[tooltip].html, tooltip);
set(layer[tooltip].visible, true);
tween(layer[tooltip].alpha, 1.0, 0.5);
asyncloop(hovering, copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey); );"
onout="tween(layer[tooltip].alpha, 0.0, 0.25, default, set(layer[tooltip].visible,false), copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey); );"
/>


<!-- the 'tooltip' textfield -->
<layer name="tooltip" keep="true"
url="%SWFPATH%/plugins/textfield.swf"
parent="STAGE"
visible="false" alpha="0"
enabled="false"
align="lefttop"
edge="bottom"
oy="-2"
autowidth="true"
autoheight="true"
background="false" backgroundcolor="0xFFFFFF" backgroundalpha="1.0"
border="false" bordercolor="0x000000" borderalpha="1.0"
borderwidth="1.0" roundedge="0"
shadow="0.0" shadowrange="4.0" shadowangle="45" shadowcolor="0x000000" shadowalpha="1.0"
textshadow="1" textshadowrange="6.0" textshadowangle="90" textshadowcolor="0x000000" textshadowalpha="1.0"
css="text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:14px;"
html=""
/>')

und dann die gewünschten Elemente, welchen einen Tooltip anzeigen sollen, um diese Einträge erweitern:
$this->cacheCode('[php]','style="tooltip" tooltip="...der Tooltip Text..."')

Bzgl. 'showtext' - ab der nächsten krpano Version (1.18) wird es dies dann auch für HTML5 geben.

Schöne Grüße,
Klaus

3

Donnerstag, 19. Juni 2014, 01:04

Danke Klaus,

werd es testen. Man lernt ja nie aus. ;) Und wär echt schön wenn es in der nächsten Version einfacher geht.

Grüße

Klaus
Das ist KEINE Signatur :D : Canon EOS 5D mkII, Canon EOS 600d, Canon EF 8-15, PT4PANO Rotator, Seitz Nodalpunktadapter

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »imagizer« (20. Juni 2014, 19:11)


4

Freitag, 20. Juni 2014, 19:17

ok...der text ist im XML Dokument..............aaaaaaber wo gehört jetzt zb der text für den Button:btn_in hin?????

$this->cacheCode('[php]','
style="tooltip" tooltip="Einzoomen"
')

$this->cacheCode('[php]','
<krpano>
<!-- krpano 1.17.4 default buttons skin -->

<!-- default mouse control mode (moveto or drag2d) -->
<control mousetype="moveto" />

<!-- default autorotate settings (disabled by default) -->
<autorotate enabled="false" waittime="1.0" accel="2.0" speed="8.0" horizon="0.0" tofov="90.0" />


<!-- the 'tooltip' style - show tooltip textfield and update positions as long as hovering -->
<style name="tooltip"
onover="copy(layer[tooltip].html, tooltip);
set(layer[tooltip].visible, true);
tween(layer[tooltip].alpha, 1.0, 0.5);
asyncloop(hovering, copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey); );"
onout="tween(layer[tooltip].alpha, 0.0, 0.25, default, set(layer[tooltip].visible,false), copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey); );"
/>


<!-- the 'tooltip' textfield -->
<layer name="tooltip" keep="true"
url="%SWFPATH%/plugins/textfield.swf"
parent="STAGE"
visible="false" alpha="0"
enabled="false"
align="lefttop"
edge="bottom"
oy="-2"
autowidth="true"
autoheight="true"
background="false" backgroundcolor="0xFFFFFF" backgroundalpha="1.0"
border="false" bordercolor="0x000000" borderalpha="1.0"
borderwidth="1.0" roundedge="0"
shadow="0.0" shadowrange="4.0" shadowangle="45" shadowcolor="0x000000" shadowalpha="1.0"
textshadow="1" textshadowrange="6.0" textshadowangle="90" textshadowcolor="0x000000" textshadowalpha="1.0"
css="text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:14px;"
html=""
/>

<!-- control buttons style -->
<style name="defaultskin_button" url="buttons-2.png" scale="0.5" align="lefttop" />

<!-- the container layer that contains the buttons -->
<layer name="defaultskin_buttons" type="container" width="360" height="40" align="bottom=" y="10" scalechildren="true" scale="1.0" keep="true">
<layer name="btn_in" x="0" style="defaultskin_button" crop="320|0|80|80" onovercrop="320|80|80|80" ondown="set(fov_moveforce,-1);" onup="set(fov_moveforce,0);" />
<layer name="btn_out" x="40" style="defaultskin_button" crop="400|0|80|80" onovercrop="400|80|80|80" ondown="set(fov_moveforce,+1);" onup="set(fov_moveforce,0);" />
<layer name="btn_left" x="80" style="defaultskin_button" crop= "0|0|80|80" onovercrop= "0|80|80|80" ondown="set(hlookat_moveforce,-1);" onup="set(hlookat_moveforce,0);" />
<layer name="btn_right" x="120" style="defaultskin_button" crop= "80|0|80|80" onovercrop= "80|80|80|80" ondown="set(hlookat_moveforce,+1);" onup="set(hlookat_moveforce,0);" />
<layer name="btn_up" x="160" style="defaultskin_button" crop="160|0|80|80" onovercrop="160|80|80|80" ondown="set(vlookat_moveforce,-1);" onup="set(vlookat_moveforce,0);" />
<layer name="btn_down" x="200" style="defaultskin_button" crop="240|0|80|80" onovercrop="240|80|80|80" ondown="set(vlookat_moveforce,+1);" onup="set(vlookat_moveforce,0);" />
<layer name="btn_ctrlmode" x="240" style="defaultskin_button" crop="800|0|80|80" onovercrop="800|80|80|80" onclick="switch(control.mousetype,moveto,drag2d); switch(control.touchtype,moveto,drag2d); update_ctrl_mode();" />
<layer name="btn_autorot" x="280" style="defaultskin_button" crop="480|0|80|80" onovercrop="480|80|80|80" onclick="switch(autorotate.enabled);" />
<layer name="btn_fs" x="320" style="defaultskin_button" crop="560|0|80|80" onovercrop="560|80|80|80" onclick="switch(fullscreen);" visible="true" devices="fullscreensupport" />
</layer>



')
Das ist KEINE Signatur :D : Canon EOS 5D mkII, Canon EOS 600d, Canon EF 8-15, PT4PANO Rotator, Seitz Nodalpunktadapter