using CSS for hotspots

  • I'm building a Phonegap iOS/Android application. Since there's no use for Flash I decided to code the interface in Javascript rather than the XML speudo code.

    Is there a way to add custom attributes to the hotspot HTMLElement?
    I can find them by doing querySelectorAll('div') and checking the kobject property of the element for the hotspot properties.
    But I was wondering if there's was a better (more native?) way.

    It would be nice to be able to simply use CSS for :hover etc.

    gr

    Ron

  • I know, but that's not what I'm asking.

    I want to use CSS3 because it's way easier and faster than Krpano's XML way.
    Think animating hover transitions depending on hotspot... easy if you have CSS at hand... awkward in Krpano XML.

    Also...

    Krpano hotspots require images. A transformed HTMLElement with pure CSS styling looks a lot smoother than a one with a bitmap.
    Krpano hotspots react as squares. With CSS3 border-radius they react as circles (comes in handy with overlapping hotspots).

  • Ah ok... that would indeed be cleaner... but the hotspot onloaded event doesn't fire (the onover, onout and onclick work fine).
    No matter, I have it working with the global onloadcomplete event and a custom one within a transition right after wait(LOAD).

    Are there any future plans for building a Javascript API? Since WebGL could replace the Flash implementation in a few years (IE11).

    gr

    Ron

  • I mean a direct JS API instead of having to proxy it through the XML scripting.

    Right now I'm setting up numerous events with the XML script and directly reroute them with the XML js() method.
    It would be really nice to be able to do it directly. Like:

    Code
    var oViewer = createPanoViewer({....});
    oViewer.addEventListener('xmlComplete',function(){...});
    etc...
  • Yesterday i was struggling a bit with this problem, then i found a solution that work perfectly in my case.

    So to help others here is my code:

    Code
    krpano = document.getElementById("krpanoSWFObject");
    krpano.set("events.onloadcomplete","js(setUpPanoVars())");
    krpano.set("events.keep",true);
    var hotspotArr = document.getElementById('krpanoSWFObject').get('hotspot').getArray();
    
    
    for(var i = 0; i < hotspotArr.length; i++){
        $(hotspotArr[i]['sprite']).addClass('hotspot-test');
    }


    Hope it helps.

Jetzt mitmachen!

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