Sie sind nicht angemeldet.

using CSS for hotspots

Sjeiti

Anfänger

  • »Sjeiti« ist der Autor dieses Themas

Beiträge: 28

  • Nachricht senden

1

Dienstag, 1. Oktober 2013, 13:03

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

jordi

Profi

Beiträge: 583

Wohnort: Barcelona

Beruf: creating ideas & coding them

  • Nachricht senden

2

Dienstag, 1. Oktober 2013, 14:04

you can very easily create a style for the hotspots in the xml and it will be working awesome...
everpano.com step beyond 360

Sjeiti

Anfänger

  • »Sjeiti« ist der Autor dieses Themas

Beiträge: 28

  • Nachricht senden

3

Dienstag, 1. Oktober 2013, 15:17

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

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

4

Dienstag, 1. Oktober 2013, 16:43

Hi,

you can get the html dom element via the 'sprite' member variable:
http://krpano.com/docu/xml/#layer.sprite

For getting the spot itself I would recommend using the 'onloaded' event of the hotspot, using querySelectorAll might be problematic when loading other panos.

Best regards,
Klaus

Sjeiti

Anfänger

  • »Sjeiti« ist der Autor dieses Themas

Beiträge: 28

  • Nachricht senden

5

Mittwoch, 2. Oktober 2013, 10:21

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

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

6

Mittwoch, 2. Oktober 2013, 10:53

Zitat von »Sjeiti«

Are there any future plans for building a Javascript API?
How exactly do you mean that?

Sjeiti

Anfänger

  • »Sjeiti« ist der Autor dieses Themas

Beiträge: 28

  • Nachricht senden

7

Mittwoch, 2. Oktober 2013, 16:41

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:

Quellcode

 
1
2
3

var oViewer = createPanoViewer({....});
oViewer.addEventListener('xmlComplete',function(){...});
etc...

indexasp

Anfänger

Beiträge: 8

Wohnort: USA, TN, Knoxville

  • Nachricht senden

8

Freitag, 8. August 2014, 16:10

js : xml communication

Sjeiti, I was curious where this line of inquiry ended for you.. did you get something up and running that made the js/css to XML relationship a bit more navigable?

Rich

v00d0

Anfänger

Beiträge: 2

  • Nachricht senden

9

Dienstag, 23. Dezember 2014, 10:21

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:

Quellcode

 
1
2
3
4
5
6
7
8

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.

Ähnliche Themen