Hi I want to add single hotspot with two different image one for mobile and one for desktop using javascript.

I am using below code to add hotspot using javascript.


var mouse_at_h = this.defaultHotspot.ath;

var mouse_at_v = this.defaultHotspot.atv;
var krpano = this.krpanoObj.get('global');
var krpanoHotSpot = krpano.addhotspot('auto');
krpanoHotSpot.url = markerImage;
krpanoHotSpot.ath = mouse_at_h;
krpanoHotSpot.atv = mouse_at_v;
krpanoHotSpot.name = this.hotSpotName;
krpanoHotSpot.accuracy = 1;
krpanoHotSpot.alpha = '1.0';
krpanoHotSpot.scale = 1;
krpanoHotSpot.zoom = false;
krpanoHotSpot.rotate = 0;
krpanoHotSpot.dragging = false; // a custom setting for enabling/disabling the dragging
krpanoHotSpot.enabled = true;
krpanoHotSpot.visible = true;
krpanoHotSpot.renderer = 'css3d';
krpanoHotSpot.edge = 'bottom';
krpanoHotSpot.x = 0;
krpanoHotSpot.y = -10;


Here I want to add url for mobile device and desktop like this : -


krpanoHotSpot.url.no-mobile= markerImage;
krpanoHotSpot.url.mobile = mobileImage;

but here no-mobile and mobile properties are not working so not able to add these in xml.

Also the krapano should detect the device based on that hotspot image should load both for mobile and desktop.
I have tried this but it is not working can someone guide me here.

Any update on above question I have a deadline so any help will be appreciated