Hotspot Text / CSS version with hover by CSS

2

Samstag, 6. August 2022, 19:25

instead of

	Quellcode
1 2	krpano.call('set(hotspot[' + _hotspot_name + '].type,text);'); krpano.call('set(hotspot[' + _hotspot_name + '].renderer,css3d);');

use

	Quellcode
1 2	krpano.set('hotspot[' + _hotspot_name + '].type', 'text'); krpano.set('hotspot[' + _hotspot_name + '].renderer, 'css3d');

for hover

	Quellcode
1 2	krpano.set('hotspot[' + _hotspot_name + '].onover', 'set(scale,1.1);'); krpano.set('hotspot[' + _hotspot_name + '].onout', 'set(scale,1.0);');

see here :
https://krpano.com/docu/js/#top
https://krpano.com/docu/xml/#hotspot

do not mix standard css with krpano attributes

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Zum Seitenanfang

Anfänger

Beruf: Designer and coder

3

Samstag, 6. August 2022, 20:14

Thanks for your reply.
The hotspots already working properly. And I don't want to only scale the button from 0.9 to 1.0. I would like to use an hover like normal CSS. So, for instance to change the color of the HTML button and the text, maybe some transitions. I would like to define this in CSS style. The CSS styling is also working, only not the hover action of the CSS.

From your reply, if I change all the calls:

	Quellcode
1	krpano.call('set(hotspot[' + _hotspot_name + '].type,text);');

in

	Quellcode
1	krpano.set('hotspot[' + _hotspot_name + '].type', 'text');

it's not working anymore, no button get the settings. I mean, when I define like your code then the button is getting the 'Image' type instead of the 'Text' type. And also WebGL instead of CSS3D.

Zum Seitenanfang

$»indexofrefraction« ist offline$ indexofrefraction

Profi

4

Samstag, 6. August 2022, 21:05

maybe you need to do

	Quellcode
1	krpano = krpano.get('global');

before using krpano.set

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Zum Seitenanfang

Anfänger

Beruf: Designer and coder

5

Samstag, 6. August 2022, 21:19

Thanks again!
Sorry, maybe i'm not clear.The buttons are working fine, see screenshot. The hotspots are 'text' and rendered by 'css3d' fine.

The thing is:When I make CSS class with hover it's not working. The hover is not working on the CSS hotspot.

That is weird, because when I do edit the CSS style IN the console of the browser, the state is updated.So what I want is this:

Zum Seitenanfang

$»indexofrefraction« ist offline$ indexofrefraction

Profi

6

Samstag, 6. August 2022, 21:38

how do you make your css hover?
the use of standard css on krpano items is limited
post a link to your (unprotected) example...

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Zum Seitenanfang

Anfänger

Beruf: Designer and coder

7

Sonntag, 7. August 2022, 12:51

I do try at 3 ways:
1. CSS
Just using hover like

	Quellcode
1 2 3 4 5 6 7	.hotspot { some styling here } .hotspot:hover { some styling here }

2. JS event
I though maybe on the onover event I can program some JS to attach some class to the specific hotspot.
So, the 'onclick' event works...and the onover event also works, but I can't attach another class to the hovered hotspot.

Quellcode

krpano.call('set(hotspot[' + _hotspot_name + '].onclick,js(' + _button_js + '));'); // WORKS (_button_js is a string with JS code)

krpano.call('set(hotspot[' + _hotspot_name + '].onover,js(console.log($(this));'); // WORKS

krpano.call('set(hotspot[' + _hotspot_name + '].onover,js($(this).addClass('active'));'); // NOT WORKING

3. By JQ

I also tried the other way around, just in the DOM using something like this (not working).

	Quellcode
1 2 3 4 5 6 7 8	$(document).on({ mouseenter: function () { $(this).addClass('hover'); }, mouseleave: function () { $(this).removeClass('hover'); } }, ".hotspot");

Maybe it's not possible to target any hotspot like this..

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

8

Sonntag, 7. August 2022, 13:06

Hi,

i would just stay inside krpano syntax, nice, short in code and simple.

Use assignstyle(); and <data + CDATA stuff or what it is you want to do.

Tuur *thumbsup*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang

$»indexofrefraction« ist offline$ indexofrefraction

Profi

9

Sonntag, 7. August 2022, 13:44

yes.. krpano doesnt work like this... there is no .hotspot class on hotspots.
even if you assign one after creating a hotspot there is internal code to control the hotspots css
and things might not work as you expect.
you should better work the krpano way and use the hotspot attributes
(see example & link in post #2)

ps. maybe be aware that assignstyle() doesnt apply a css style
but krpano styles which are attribute collections

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Zum Seitenanfang

Anfänger

Beruf: Designer and coder

10

Sonntag, 7. August 2022, 16:44

Thanks for all the input so far.
I'm trying to understand. I can understand that the added hotspots cannot be targeted by the 'normal' CSS. That is clear to me.
But, I do define the hotspots dynamically and push them in the krpano instance. So...the hotspot do have .hotspot classes.

The real thing I would like to do is":

Use a JSON file to push hotspots to the scene dynamically. That works with hotspots in text / css3d renderer.
This way I can define the hotspots looks by CSS style. That also works fine.
The hover doesn't work (yet).

Do I understand it right, this way is not the good way? And how else can I achieve this dynamic JSON hotspots (maybe even with hover).

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

11

Sonntag, 7. August 2022, 17:26

Do the styles in krpano and assign the right styles to the 'new' hotspots from js(on).
So from js .. add hotspot + location and all vars you need to be set, ( type, style, looks, etc..) but let it be defined in krpano styles, data, vars, functionality, exclusivity etc etc.. perhaps add all to an array preinit.. and pick it up at a scene load.

Simple short and quick
Tuur *thumbsup*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang

Anfänger

Beruf: Designer and coder

12

Sonntag, 7. August 2022, 19:11

Hmm ok, so back to the basics then.

I make KRPano tours since 2014 and always used PNG image hotspots inside the XML. That worked, but I would like to create the dynamic ones as written before. So far so good. I figured out that this 'text' was possible to add hotspots by JavaScript with CSS styling. Great.

Now I would like to understand what you mean by 'do the styles in KRPano'. I think i'm missing that part..how to define this styles in KRPano? Because I always used PNG images, I never really 'defined' any style like this.

Can you point me in the right direction?

Zum Seitenanfang

$»indexofrefraction« ist offline$ indexofrefraction

Profi

13

Sonntag, 7. August 2022, 19:25

1) a hotspot is not simply a div that you can freely style by css like in normal websdesign.
kprano hotspots / layers are nested html elements controlled by krpano and the used attributes
so to "style" krpano elements you use the krpano (hotspot) attributes as described in the documentation / examples.

2) a krpano <style name="mystyle" .... /> has nothing to do with css, its just a collection of attributes that can get applied to an element (hotspot/layer) --> for example by the mentioned assignstyle() function

3) text hotspots have a css attribute but the support is limited. see here https://krpano.com/plugins/textfield/#css
to alter the css of a text hotspot, change its css attribute, but..
for other things like alpha, scale, rotate, etc you would use the according (hotspot) attributes.

if you try to style krpano elements by external css you leave the krpano way and need to figure out what works on your own. some things may work but other things will get overwritten by krpano on refreshes... also there is no documentation on any of this.

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von »indexofrefraction« (8. August 2022, 20:25)

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

14

Sonntag, 7. August 2022, 19:57

Sorry, i'm on holidays.
Back around 22-8.
When you still need the help around that date i could help.

Tuur *thumbsup*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang

Anfänger