Hotspot Text / CSS version with hover by CSS

  • Hello,
    I'm using JavaScript to add Hotspots type Text by renderer CSS3D. That works quite nice, but I would like to make the CSS hover also work.
    Just with CSS it's not working out of the box for what I know. But also when I try to use the 'onover' function to attach

    an extra class like 'hover' it's not adding the class to the hotspot.


    So I do this:

    SCSS

    Code
    .hotspot {
    	define some styling here
    
    
       &:hover {
        	define some styling here
       }
    
    
    }


    JS

    Code
    krpano.call('addhotspot(' + _hotspot_name + ')');
    krpano.call('set(hotspot[' + _hotspot_name + '].type,text);');
    krpano.call('set(hotspot[' + _hotspot_name + '].renderer,css3d);');
    etc..


    The hotspot is working fine, everything is perfect. Only the hover is not working...Anybody have some tips?Thanks!

    2 Mal editiert, zuletzt von aschakel (6. August 2022 um 21:20)

  • instead of

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


    use

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


    for hover

    Code
    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

  • 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:

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

    in

    Code
    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.

  • 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:

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

    Code
    .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.

    Code
    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).

    Code
    $(document).on({
        mouseenter: function () {
           $(this).addClass('hover');
        },
        mouseleave: function () {
                  $(this).removeClass('hover');
        }
    }, ".hotspot");


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

  • 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*

  • 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

  • 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":

    1. Use a JSON file to push hotspots to the scene dynamically. That works with hotspots in text / css3d renderer.
    2. This way I can define the hotspots looks by CSS style. That also works fine.
    3. 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).

  • 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*

  • 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?

  • 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.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!