I am developing a callout hotspot plugin program.
I created a hotspot by creating an image using java.
The callout hotspot is composed of lines and text boxes.
How do I make mouse clicks respond only to the text box?
I would appreciate it if you could give me even a small hint.
Thank you to those who always help.Now it's resolved.
I ran it through the krpano.html and krpano.js files in the example folder downloaded when purchasing.
Thank you again.
All of the layer and hotspot examples presented in krpano do not work. How should I create an HTML file?
Can I use the js file without modification after downloading it?
Thank you for your reply
The problem was well resolved with the correct answer.
Thank you so much for your reply.
have a happy day...
sorry.
I am attaching the code I am practicing.
thank you
https://krpano.com/examples/?layers => xml: responsive.xml
===========================================================================
<krpano version="1.22" title="Virtual Tour">
<include url="skin/vtourskin.xml" />
<!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... -->
<skin_settings maps="false"
maps_type="google"
maps_bing_api_key=""
maps_google_api_key=""
maps_zoombuttons="false"
maps_loadonfirstuse="true"
gyro="true"
gyro_keeplookingdirection="false"
webvr="true"
webvr_keeplookingdirection="true"
webvr_prev_next_hotspots="true"
autotour="false"
littleplanetintro="false"
followmousecontrol="false"
title="true"
thumbs="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"
thumbs_loop="false"
tooltips_buttons="false"
tooltips_thumbs="false"
tooltips_hotspots="false"
tooltips_mapspots="false"
deeplinking="false"
loadscene_flags="MERGE"
loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)"
loadingtext=""
layout_width="100%"
layout_maxwidth="814"
controlbar_width="-24"
controlbar_height="40"
controlbar_offset="20"
controlbar_offset_closed="-40"
controlbar_overlap.no-fractionalscaling="10"
controlbar_overlap.fractionalscaling="0"
design_skin_images="vtourskin.png"
design_bgcolor="0x2D3E50"
design_bgalpha="0.8"
design_bgborder="0"
design_bgroundedge="1"
design_bgshadow="0 4 10 0x000000 0.3"
design_thumbborder_bgborder="3 0xFFFFFF 1.0"
design_thumbborder_padding="2"
design_thumbborder_bgroundedge="0"
design_text_css="color:#FFFFFF; font-family:Arial;"
design_text_shadow="1"
/>
<!--
For an alternative skin design either change the <skin_settings> values
from above or optionally include one of the predefined designs from below.
-->
<!-- <include url="skin/vtourskin_design_flat_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_glass.xml" /> -->
<!-- <include url="skin/vtourskin_design_ultra_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_117.xml" /> -->
<!-- <include url="skin/vtourskin_design_117round.xml" /> -->
<!-- <include url="skin/vtourskin_design_black.xml" /> -->
<layer
type="text"
text.desktop="[span style='font-size:20px;font-weight:bold;']Responsive Layers Examples[/span][br]Resize the Browser Window"
text.mobile.or.tablet="[span style='font-size:20px;font-weight:bold;']Responsive Layers Examples[/span][br]Rotate the Device"
css="color:white; text-align:center; font-size:14px; line-height:150%;"
txtshadow="0 1 2 0x000000 1.0"
align="top" y="100"
enabled="false"
bgalpha="0"
zorder="2"
/>
<layer
type="text"
template="Size: {{stagewidth}} x {{stageheight}}"
css="color:white; font-size:16px; font-weight:bold;"
txtshadow="0 1 2 0x000000 1.0"
align="center"
enabled="false"
bgalpha="0"
zorder="1"
/>
<!-- Example 1: Change the scale automatically depending on the window width in two steps. -->
<layer
url="krpano.svg"
align="right"
x="10" y="-160"
scale="link:stagewidth:stagewidth LT 700 ? 0.5 : 1.0"
/>
<!-- Example 2: Change the scale automatically depending on the window width in three steps. -->
<layer
url="krpano.svg"
align="right"
x="10" y="-80"
scale="link:stagewidth:stagewidth LT 500 ? 0.5 : (stagewidth LT 800 ? 0.7 : 1.0)"
/>
<!-- Example 3: Change the scale relative to the window width within given limits. -->
<layer
url="krpano.svg"
align="right"
x="10" y="0"
scale="link:stagewidth:clamp(stagewidth / 1000, 0.5, 2.0)"
/>
<!-- Example 4: Change the scale using the onresize event. -->
<layer
name="case4"
url="krpano.svg"
align="right"
x="10" y="+80"
scale="1.0"
/>
<events name="case4" keep="true" onresize="case4_onresize()" />
<action name="case4_onresize">
layer[case4].scale = stagewidth LT 600 ? 0.5 : 1.0;
</action>
<!-- Example 5: Change the scale animated using the onresize event. -->
<layer
name="case5"
url="krpano.svg"
align="right"
x="10" y="+160"
scale="1.0"
/>
<events name="case5" keep="true" onresize="case5_onresize()" />
<action name="case5_onresize">
tween(layer[case5].scale, (stagewidth LT 600 ? 0.5 : 1.0));
</action>
<!-- Example 6: Make elements visible depending on portrait or landscape mode. -->
<layer
type="text"
text="This element is only visible in landscape mode."
width="180"
css="color:white;"
padding="8"
bgcolor="0x00000"
bgalpha="0.5"
bgblur="5"
align="leftbottom" x="10" y="10"
visible="link:event.onresize:stagewidth GT stageheight"
/>
<layer
type="text"
text="This element is only visible in portrait mode."
width="180"
css="color:white;"
padding="8"
bgcolor="0x00000"
bgalpha="0.5"
bgblur="5"
align="lefttop" x="10" y="10"
visible="link:event.onresize:stagewidth LT stageheight"
/>
<!-- Example 7: Select three different layouts depending on the window width. -->
<layer name="case7_info"
type="text"
css="color:white;"
txtshadow="0 1 2 0x000000 1.0"
align="left" x="20"
enabled="false"
bgalpha="0"
zorder="2"
/>
<events name="case7" keep="true" onresize="case7_onresize()" />
<!-- Layout 1: <600, Layout 2: 600-1000, Layout 3: >1000 -->
<action name="case7_onresize" scope="private:CASE7">
newlayout = global.stagewidth LT 600 ? 1 : (global.stagewidth LT 1000 ? 2 : 3);
if(newlayout != oldlayout,
oldlayout = newlayout;
case7_setup_layout(get(newlayout));
);
</action>
<action name="case7_setup_layout" scope="local" args="layout">
if(layout == 1,
// do several layout settings here...
layer[case7_info].text = "Layout 1: Small";
,layout == 2,
// do several layout settings here...
layer[case7_info].text = "Layout 2: Middle";
,layout == 3,
// do several layout settings here...
layer[case7_info].text = "Layout 3: Large";
);
</action>
<scene name="scene_013" title="013" onstart="" thumburl="panos/013.tiles/thumb.jpg" lat="" lng="" alt="" heading="">
<control bouncinglimits="calc:image.cube ? true : false" />
<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/013.tiles/preview.jpg" />
<image>
<cube url="panos/013.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,640,1280,2560" />
</image>
</scene>
<scene name="scene_014" title="014" onstart="" thumburl="panos/014.tiles/thumb.jpg" lat="" lng="" alt="" heading="">
<control bouncinglimits="calc:image.cube ? true : false" />
<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/014.tiles/preview.jpg" />
<image>
<cube url="panos/014.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,640,1280,2560" />
</image>
</scene>
</krpano>If I run the layer example shown here, it works fine.
Layer examples do not appear in files containing vtourskin.xml.
Is there a solution?