[摘要]什么是tooltips效果?kr中您可以理解为鼠标onhover时显示的文字提示,当然showtext也可以算是tooltips效果了,而showtext默认有显示的时间,需要修改代码。这次我们来自己定义tooltips,不设置显示后消失时间,当然krpano没有定义tooltips插件或相关属性,需要通过textfield来实现,详见代码
代码说明
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!-- 在需要显示文字提示的layer中使用tooltip样式(tooltip名字是自定义的),tooltip属性输入需要显示的文字 --> <layer name="buttons" keep="true" type="container" align="bottom" width="240" height="40" y="10"> <layer name="in" style="button|tooltip" tooltip="Zoom In" x="0" crop="160|0|40|40" onovercrop="160|40|40|40" ondowncrop="160|80|40|40" ondown="set(fov_moveforce,-1);" onup="set(fov_moveforce,0);" /> <layer name="out" style="button|tooltip" tooltip="Zoom Out" x="40" crop="200|0|40|40" onovercrop="200|40|40|40" ondowncrop="200|80|40|40" ondown="set(fov_moveforce,+1);" onup="set(fov_moveforce,0);" /> <layer name="left" style="button|tooltip" tooltip="Look Left" x="80" crop= "0|0|40|40" onovercrop= "0|40|40|40" ondowncrop= "0|80|40|40" ondown="set(hlookat_moveforce,-1);" onup="set(hlookat_moveforce,0);" /> <layer name="right" style="button|tooltip" tooltip="Look Right" x="120" crop= "40|0|40|40" onovercrop= "40|40|40|40" ondowncrop= "40|80|40|40" ondown="set(hlookat_moveforce,+1);" onup="set(hlookat_moveforce,0);" /> <layer name="up" style="button|tooltip" tooltip="Look Up" x="160" crop= "80|0|40|40" onovercrop= "80|40|40|40" ondowncrop= "80|80|40|40" ondown="set(vlookat_moveforce,-1);" onup="set(vlookat_moveforce,0);" /> <layer name="down" style="button|tooltip" tooltip="Look Down" x="200" crop="120|0|40|40" onovercrop="120|40|40|40" ondowncrop="120|80|40|40" ondown="set(vlookat_moveforce,+1);" onup="set(vlookat_moveforce,0);" /> </layer> <!-- 在需要显示文字提示的hotspot中使用tooltip样式(tooltip名字是自定义的),tooltip属性输入需要显示的文字 --> <hotspot name="spot1" url="../../images/css3d_logo.png" style="draghotspot|tooltip" tooltip="CSS-3D Transforms Logo" ath="+33" atv="-16" /> <hotspot name="spot2" url="../../images/flashlogo80.png" style="draghotspot|tooltip" tooltip="Flash Logo" ath="+28" atv="+11" /> <hotspot name="spot3" url="../../images/html5logo80.png" style="draghotspot|tooltip" tooltip="HTML5 Logo" ath="-22" atv="-22" /> <hotspot name="spot4" url="../../images/webgl_logo.png" style="draghotspot|tooltip" tooltip="WebGL Logo" ath="-33" atv="+10" /> <hotspot name="spot5" url="../../images/krpano_logo.png" style="draghotspot|tooltip" tooltip="krpano Logo" ath="0" atv="+20" /> <hotspot name="spot6" style="hotspot_ani_white|tooltip" tooltip="Animated Hotspot" ath="0" atv="-20" /> <!-- 定义一个'tooltip'命名的样式,提供给热点或layer调用,通过鼠标位置获取文字layer的需要显示位置--> <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); );" /> <!-- 定义一个tooltip命名的textfield layer 用于显示提示文字 --> <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="" /> |