You are not logged in.

Add Name on hotspot image

vishruttechtic

Beginner

  • "vishruttechtic" started this thread

Posts: 21

  • Send private message

1

Wednesday, December 8th 2021, 6:37am

Add Name on hotspot image

krpano = krpano.get('global');

var hs = krpano.addhotspot('auto');
hs.url = 'http://localhost:3900/public/markers/venue2.png';
hs.ath = mouse_at_h;
hs.atv = mouse_at_v;
hs.name = makeid(5);
hs.accuracy = 1;
hs.alpha = '1.0';
hs.scale = 0.5;
hs.zoom = true;
hs.rotate = 0;
hs.dragging = true; // a custom setting for enabling/disabling the dragging
hs.enabled = true;
hs.visible = true;
hs.renderer = 'css3d';
console.log('hs', hs);




Currently I am adding hotspot like above code and it is working perfectly fine but now I want to add hotspot name on hotspot image and for multiple hotspot which is created by user so there will be a one hotspot and its name on it this way it will be multiple with different names.

I have done some R&D for this and found out that there is a layer we can add in xml but i don't know how to do that using JavaScript while adding hotspot.

Can you please guide me. *smile*

klaus.krpano

Administrator

Posts: 13,499

  • Send private message

2

Friday, December 10th 2021, 9:32am

Hi,

it works basically the same way:

Source code

 
1
2
3
4
5
6
7

var text = krpano.addlayer();
text.type = "text";
text.html = "Hello";
text.edge = "bottom";
text.y = 5;
text.enabled = false;
text.parent = hs.getfullpath();


Additionally you could also stuff like this - fade the text in/out when hovering the hotspot:

Source code

 
1
2
3

text.alpha = 0;
hs.onover = function(){ krpano.actions.tween(text.getfullpath()+".alpha", 1.0); };
hs.onout = function(){ krpano.actions.tween(text.getfullpath()+".alpha", 0.0); };


Best regards,
Klaus

Similar threads