Adding words to hot spots when mouse hovers (similar to "demotour-weingut")

    I am a photographer and a novice to xml coding.

    I am using the the "MAKE VTOUR (NORMAL) droplet"

    I would like to add words to the "ani.white" hotspot as the moise hovers over.

    However I am unable to distinguish between the hotspots in the tour.xml and the vtour.xml.

    I understand from the example "demotour-weingut" that I then need to add the coding:


    <!-- text style for hotspot
    hovering -->


    <textstyle
    name="hotspottextstyle"


    font="Arial"
    fontsize="18" bold="true" italic="true"
    textcolor="0xFFF7EF" background="false"
    border="false"


    alpha="1"
    blendmode="layer"
    effect="glow(0x000000,0.5,4,3);dropshadow(4,45,0x000000,4,0.66);"


    origin="cursor"
    edge="bottom" textalign="center" xoffset="0"
    yoffset="-3" noclip="true" showtime="0.1" fadetime="0.25"
    fadeintime="0.1"


    />


    Any tips would be most welcome.

    Thank you, Richard (rpjspx@gmail.com)

    Code
    <!-- hotspot style predefines - white hotspot -->	<style name="hotspot_ani_white"	       url="hotspot_ani_white_64x64x20.png"	       crop="0|0|64|64"	       framewidth="64" frameheight="64" frame="0" lastframe="19"	       onloaded="hotspot_animate();"	       />
	<!-- hotspot animation action -->	<action name="hotspot_animate">		inc(frame,1,get(lastframe),0);		mul(ypos,frame,frameheight);		txtadd(crop,'0|',get(ypos),'|',get(framewidth),'|',get(frameheight));		delayedcall(0.03, if(loaded, hotspot_animate() ) );	</action>			<!-- example hotspots -->	<hotspot name="spot1" style="hotspot_ani_white" ath="-25" atv="-10" onclick="" onhover="showtext(This is text to display onhover,hotspottextstyle)"/>

    Thank you. However I am still struggling to see text.

    I am trying to modify XML code created from the "make pano normal droplet"

    I modifying the code and changing the .png to aniwhite.

    It works.

    But when I modify the code in the tour.xml:


    <!-- place your scene hotspots here -->
    <hotspot name="spot1"
    style="skin_hotspotstyle"
    ath="-146.505"
    atv="8.784"
    onhover="showtext('the bar',hotspottextstyle);"
    linkedscene="scene_02__the_priory__caerleon__bar_copy" />
    <hotspot name="spot2" style="skin_hotspotstyle" ath="-108.145" atv="-11.267" linkedscene="scene_02__the_priory__caerleon__bar_copy" />

    There is no text on hover.

    (the following code also added:


    <!-- text style for hotspot hovering -->
    <textstyle name="hotspottextstyle"
    font="Arial" fontsize="18" bold="true" italic="true" textcolor="0xFFF7EF" background="false" border="false"
    alpha="1" blendmode="layer" effect="glow(0x000000,0.5,4,3);dropshadow(4,45,0x000000,4,0.66);"
    origin="cursor" edge="bottom" textalign="center" xoffset="0" yoffset="-3" noclip="true" showtime="0.1" fadetime="0.25" fadeintime="0.1"
    />
    Can you please advise what I am doing wrong.

    Thank you

    Don't see the skin_hotspotstyle and/or your code so it is difficult to give you exact answer but I think you are mixing something.
    In your last code section change the

    Code
    style="skin_hotspotstyle"  -> style="hotspot_ani_white"

    If not defined in your code already than add:

    Code
    <style name="hotspot_ani_white"	       url="hotspot_ani_white_64x64x20.png"	       crop="0|0|64|64"	       framewidth="64" frameheight="64" frame="0" lastframe="19"	       onloaded="hotspot_animate();"	       />
	<!-- hotspot animation action -->	<action name="hotspot_animate">		inc(frame,1,get(lastframe),0);		mul(ypos,frame,frameheight);		txtadd(crop,'0|',get(ypos),'|',get(framewidth),'|',get(frameheight));		delayedcall(0.03, if(loaded, hotspot_animate() ) );	</action>

    If you can't do it by your self than share the url to your xml.

    Below the xml code. It is a simple tour . 2 scenes. Each has one hot spot.

    from the Tour.xml

    <krpano version="1.16" title="Virtual Tour" onstart="startup();">

    <include url="skin/vtourskin.xml" />

    <!-- set skin settings: bingmaps? gyro? thumbnail controlling? tooltips? -->
    <skin_settings bingmaps="false"
    bingmaps_key=""
    bingmaps_zoombuttons="false"
    gyro="true"
    thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
    thumbs_opened="false"
    thumbs_text="false"
    thumbs_dragging="true"
    thumbs_onhoverscrolling="false"
    thumbs_scrollbuttons="false"
    thumbs_scrollindicator="false"
    tooltips_thumbs="false"
    tooltips_hotspots="false"
    tooltips_mapspots="false"
    controlbar_offset="20"
    />

    <!-- set optional skin logo url -->
    <layer name="skin_logo" url="" scale="0.25" opened_onclick="openurl('...',_blank);" />


    <action name="startup">
    if(startscene === null, copy(startscene,scene[0].name));
    loadscene(get(startscene), null, MERGE);
    </action>


    <scene name="scene_01__The_Priory___Caerleon_copy" title="01. The Priory, Caerleon copy" onstart="" thumburl="panos/01__The_Priory___Caerleon_copy.tiles/thumb.jpg" lat="" lng="" heading="">

    <view hlookat="-125.740" vlookat="-7.371" fovtype="MFOV" fov="120.000" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="range" vlookatmin="-67.998" vlookatmax="67.998" />

    <preview url="panos/01__The_Priory___Caerleon_copy.tiles/preview.jpg" />

    <image>
    <cube url="panos/01__The_Priory___Caerleon_copy.tiles/pano_%s.jpg" />
    <mobile>
    <cube url="panos/01__The_Priory___Caerleon_copy.tiles/mobile_%s.jpg" />
    </mobile>
    </image>

    <!-- place your scene hotspots here -->
    <hotspot name="spot1" style="skin_hotspotstyle" ath="-145.884" atv="8.324"" onhover="showtext('The Priory Bar',hotspottextstyle)" onclick"linkedscene="scene_02__the_priory__caerleon__bar_copy" />

    </scene>

    <scene name="scene_02__The_Priory__Caerleon__bar_copy" title="02. The Priory, Caerleon, bar copy" onstart="" thumburl="panos/02__The_Priory__Caerleon__bar_copy.tiles/thumb.jpg" lat="" lng="" heading="">

    <view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="range" vlookatmin="-61.341" vlookatmax="61.341" />

    <preview url="panos/02__The_Priory__Caerleon__bar_copy.tiles/preview.jpg" />

    <image>
    <cube url="panos/02__The_Priory__Caerleon__bar_copy.tiles/pano_%s.jpg" />
    <mobile>
    <cube url="panos/02__The_Priory__Caerleon__bar_copy.tiles/mobile_%s.jpg" />
    </mobile>
    </image>

    <!-- place your scene hotspots here -->
    <hotspot name="spot1" style="skin_hotspotstyle" ath="175.006" atv="-0.119" linkedscene="scene_01__the_priory___caerleon_copy" />

    </scene>


    </krpano>

    THE VTOUR.xml


    <krpano version="1.16" title="Virtual Tour" onstart="startup();">

    <include url="skin/vtourskin.xml" />

    <!-- set skin settings: bingmaps? gyro? thumbnail controlling? tooltips? -->
    <skin_settings bingmaps="false"
    bingmaps_key=""
    bingmaps_zoombuttons="false"
    gyro="true"
    thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
    thumbs_opened="false"
    thumbs_text="false"
    thumbs_dragging="true"
    thumbs_onhoverscrolling="false"
    thumbs_scrollbuttons="false"
    thumbs_scrollindicator="false"
    tooltips_thumbs="false"
    tooltips_hotspots="false"
    tooltips_mapspots="false"
    controlbar_offset="20"
    />

    <!-- set optional skin logo url -->
    <layer name="skin_logo" url="" scale="0.25" opened_onclick="openurl('...',_blank);" />


    <action name="startup">
    if(startscene === null, copy(startscene,scene[0].name));
    loadscene(get(startscene), null, MERGE);
    </action>


    <scene name="scene_01__The_Priory___Caerleon_copy" title="01. The Priory, Caerleon copy" onstart="" thumburl="panos/01__The_Priory___Caerleon_copy.tiles/thumb.jpg" lat="" lng="" heading="">

    <view hlookat="-125.740" vlookat="-7.371" fovtype="MFOV" fov="120.000" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="range" vlookatmin="-67.998" vlookatmax="67.998" />

    <preview url="panos/01__The_Priory___Caerleon_copy.tiles/preview.jpg" />

    <image>
    <cube url="panos/01__The_Priory___Caerleon_copy.tiles/pano_%s.jpg" />
    <mobile>
    <cube url="panos/01__The_Priory___Caerleon_copy.tiles/mobile_%s.jpg" />
    </mobile>
    </image>

    <!-- place your scene hotspots here -->
    <hotspot name="spot1" style="skin_hotspotstyle" ath="-145.884" atv="8.324"" onhover="showtext('The Priory Bar',hotspottextstyle)" onclick"linkedscene="scene_02__the_priory__caerleon__bar_copy" />

    </scene>

    <scene name="scene_02__The_Priory__Caerleon__bar_copy" title="02. The Priory, Caerleon, bar copy" onstart="" thumburl="panos/02__The_Priory__Caerleon__bar_copy.tiles/thumb.jpg" lat="" lng="" heading="">

    <view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="range" vlookatmin="-61.341" vlookatmax="61.341" />

    <preview url="panos/02__The_Priory__Caerleon__bar_copy.tiles/preview.jpg" />

    <image>
    <cube url="panos/02__The_Priory__Caerleon__bar_copy.tiles/pano_%s.jpg" />
    <mobile>
    <cube url="panos/02__The_Priory__Caerleon__bar_copy.tiles/mobile_%s.jpg" />
    </mobile>
    </image>

    <!-- place your scene hotspots here -->
    <hotspot name="spot1" style="skin_hotspotstyle" ath="175.006" atv="-0.119" linkedscene="scene_01__the_priory___caerleon_copy" />

    </scene>


    </krpano>

    Thank you for any input in where I am going wrong

    your code has syntax errors. Please read on forum on how to check your code. E.g. Open your full absolute path to your xml and read what browser is telling you.
    I am using Ultra editor and XML manager which is telling me if I have obvious errors. Not perfect solution but good for start.

    In your case, when you see one hotspot is not working correctly focus on that part of code and fix it. You have multiple same error in your code.
    E.g. definition of the hotspot:
    1 . onclick"linkedscene="sc... . -> onclick="" linkedscene="....
    2. atv="8.324"" -> atv="8.324"

    3. same hotspot name used. Not sure but I think this is not allowed if you have keep="true"

    As I can't see your skin_hotspotstyle definition can't help you more.
    Before I gave you exact code for hotspot and appropriate hotspot style that is working. Use that code if you have troubles fixing your hotspots.

    Please try by your self. At the end you can send me link to your online xml version but before you need to learn to fix those obvious mistakes.


Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login