How add hotspots to Compare Panos?

federiko · September 16, 2024 at 4:33 AM

Hi, how add hotspots to new Splitscreen (Compare Panos)?
krpano.com - Examples

I am use dynamic js api.

Please make a simple example of adding any hotspot.

federiko · December 3, 2024 at 1:37 AM New

Code example.

HTML

<!DOCTYPE html>
<html>
<head>
	<title>krpano</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta http-equiv="x-ua-compatible" content="IE=edge" />
	<style>
		html { height:100%; }
		body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial,Helvetica,sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
	</style>
</head>
<body>

<script src="krpano.js"></script>

<div id="pano" style="width:100%;height:100%;">
	<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;text-align:center;"><td>ERROR:<br><br>Javascript not activated<br><br></td></tr></table></noscript>
	<script>

  function krpano_onready_callback(krpano_interface) {
   
   var spotname="hotspot_name_22";
   
   //add hotspot
   krpano_interface.call("addhotspot(" + spotname + ");");
   
   krpano_interface.call("set(hotspot[" + spotname + "].renderer,svg);");
   
   //add line
   krpano_interface.call("set(hotspot[" + spotname + "].polyline, true);");

   krpano_interface.call("set(hotspot[" + spotname + "].bordercolor, 0xffff00);");
   
   krpano_interface.call("set(hotspot[" + spotname + "].point[0].ath,-12);");
   krpano_interface.call("set(hotspot[" + spotname + "].point[0].atv,-5);");
   
   krpano_interface.call("set(hotspot[" + spotname + "].point[1].ath,-10);");
   krpano_interface.call("set(hotspot[" + spotname + "].point[1].atv,-5);");
     
   krpano_interface.call("set(hotspot[" + spotname + "].point[2].ath,10);");
   krpano_interface.call("set(hotspot[" + spotname + "].point[2].atv,5);");
     
   krpano_interface.call("set(hotspot[" + spotname + "].point[3].ath,10);");
   krpano_interface.call("set(hotspot[" + spotname + "].point[3].atv,-5);");



  }
  
  
		embedpano({xml:"compare-panos.xml", target:"pano", passQueryParameters:"xml,skin_settings.littleplanetintro,editmode", onready: krpano_onready_callback});

	</script>
</div>

</body>
</html>

Display More

If you break the panorama, you can see a line behind the image layer. Screenshot in attachment.

How add hotspots to Compare Panos?

Participate now!

Tags