You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

mstoss

Intermediate

  • "mstoss" started this thread

Posts: 296

Location: Berlin

  • Send private message

1

Sunday, May 10th 2020, 2:28pm

(SOLVED) Basic question: image map style scaling

Hello,
Once in a while I need to show some detail shots in a panorama. Normally I just open the desired image "as is". This seems to work on all devices apart from smartphones, where I need to add e.g. a scale.mobile="0.5" parameter.

However, now I need to open a detail shot with further infos. I tried to achieve this by a parent/child layout, where the basic image is the parent element and an additional - clickable - element is located on that image via x/y values. In its basic form, this could be e.g. a "close x" or the red/blue example below. This is still working fine - apart from smartphones: here the additional elements don't stick to the places I expect them to be.

So, I seem to be missing the basic point of locating elements in their relation to each other in a way which is device independent.


If I should go for width/height parameters in %, how do I relate the child elements to a specific location? In my understanding, I can only do this in absolute values via x/y in pixels and the child parameters should than resize according to the dimensions of the parent element.I'm probably on the wrong track and here is some of my code so far (just to give you an impression). Can somebody point me to the right one, please?

Yours
Michael

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
	<style name="infospotstyle" distorted="false" url="skin/infospot.png" scale="0.45" zorder="98" 
	   	onover="tween(scale,0.55);" onout="tween(scale,0.5);" onloaded="loadstyle(skin_tooltips);"   	/>

	<style name="parentstyle" distorted="false" align="center" width="50%" height="50%" alpha="0" enabled="false" visible="false"  />  	
	<style name="opendetailstyle" distorted="false" align="lefttop" edge="center"	/>  	
	<style name="detailstyle" distorted="false" align="center" alpha="0" enabled="false" visible="false"  />  	

	<style name="backstyle" url="skin/back.png" distorted="false" enabled="true" align="leftbottom" x="15" y="40"	/> 	

<!--  Open the basic info  -->	
			<hotspot name="hs_infobox" ath="40" atv="15" style="infospotstyle" onclick="a_popupinfo(parentcontent);"  />


<!--  The basic info parent with close-icon and detail child elements  -->	
			<layer name="parentcontent" type="image" url="%CURRENTXML%/stills/de/aufmacher_infobox.jpg"  children="true" align="center" style="parentstyle" >
				<layer name="close5" type="image" url="skin/close.png" distorted="false" align="righttop" y="10" x="10" parent="parentcontent" onclick="a_popoutinfo(parentcontent);"/>		         	
				<layer name="red" type="image"  url="%CURRENTXML%/stills/de/red-hs.jpg" style="opendetailstyle" parent="parentcontent" x="155" y="166"  onclick="a_popupdetails(reddetail);"/>
				<layer name="blue" type="image"  url="%CURRENTXML%/stills/de/blue-hs.jpg" style="opendetailstyle" parent="parentcontent" x="514" y="166"  onclick="a_popupdetails(bluedetail);"/>
			</layer>

<!--  The detail informations to be displayed when opening the child elements from above  -->				
					<layer name="reddetail" type="image" url="%CURRENTXML%/stills/de/red.jpg" children="true" enabled="true" align="center" style="detailstyle" >
						<layer name="back1" type="image" parent="reddetail" style="backstyle" onclick="a_back(reddetail,parentcontent);"/>
					</layer>
	
					<layer name="bluedetail" type="image" url="%CURRENTXML%/stills/de/blue.jpg" children="true" enabled="true" align="center" style="detailstyle" >
						<layer name="back2" type="image" url="skin/back.png" parent="bluedetail" style="backstyle" onclick="a_back(bluedetail,parentcontent);"/>
					</layer>

Edit: Lord... I just forgot to add the scalechildren parameter...

This post has been edited 2 times, last edit by "mstoss" (May 10th 2020, 8:46pm) with the following reason: solved... somehow