You are not logged in.

CSS/HTML vs an image for hotspot visual representation

indexasp

Beginner

  • "indexasp" started this thread

Posts: 8

Location: USA, TN, Knoxville

  • Send private message

1

Thursday, August 7th 2014, 9:42pm

CSS/HTML vs an image for hotspot visual representation

My company and I are new to KRP but are buying the license this week and are planning to use the product quite bit in the future. Our primary use case is in having a 360 degree space overlaid with several hotspots. Each hotspot will be the same visual entity, and while I see already how to reference a binary image file (jpg, png etc) I'm wondering if it's possible to handle those hotspot graphics in a different manner.

Namely, one notion i'd like to explore is to instead utilize html/css only for the hotspot visual entity... This example shows what I'm after - Here we have a couple hotspots (span elements with a child link) that contain an image (transparent.gif), an example using a text character as the span content, and an example with no content at all.


Is this approach feasible with KRP? Being able to concisely control styles via CSS and leverage transitions, animation, etc. would be nice.


Thanks much,
Rich

sachagriffin

Master

Posts: 1,857

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

2

Sunday, August 10th 2014, 9:28am

That example didn't work or didn't make any sense to me.
For hotspots, you can make them pretty much any which way you want. I'm not aware of any limitations.
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

indexasp

Beginner

  • "indexasp" started this thread

Posts: 8

Location: USA, TN, Knoxville

  • Send private message

3

Wednesday, August 20th 2014, 6:18pm

There are examples I've found for hotspots & tooltips for the FLASH versions, but we're not using any Flash versions at all. Are there any examples of HTML5 hotspots and tooltips I could examine?

"make them any way you want" is encouraging but not very practical in terms of helping a newbie KrPano user move forward.

sachagriffin

Master

Posts: 1,857

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

4

Wednesday, August 20th 2014, 9:18pm

You can make a textfield a hotspot. An image a hotspot. A container a hotspot.
You can have a container with an image inside, and a textfield.

So that a shape, an image and text as a hotspot.

See the documentation for the textfield plugin

http://krpano.com/plugins/textfield/#top

Actually for some strange reason, you CAN NOT have a container as a hotspot, so you have to go old school and use a 1px transparent png image type. Then with that as the parent you can have a container being the child. Make sure to set the height/width for the spacer hotspot.

The examples folder has examples for understanding the parent/child system.
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

indexasp

Beginner

  • "indexasp" started this thread

Posts: 8

Location: USA, TN, Knoxville

  • Send private message

5

Monday, August 25th 2014, 3:44pm

The tooltips example in the examples directory only seems to work in flash. Removing the swf reference and changing the html5 value to html5:"prefer" results in nothing rendering at all. Do tooltips only work with flash? That would be a real bummer. *confused*

Quoted



See the documentation for the textfield plugin

http://krpano.com/plugins/textfield/#top

The examples folder has examples for understanding the parent/child system.

sachagriffin

Master

Posts: 1,857

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

6

Monday, August 25th 2014, 7:48pm

Thats right. That's why you need to remake the tooltips with textfield in the method I described.
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

indexasp

Beginner

  • "indexasp" started this thread

Posts: 8

Location: USA, TN, Knoxville

  • Send private message

7

Tuesday, August 26th 2014, 10:23pm

Sorry, not getting it... Just dense I guess. To be clear, the hotspot would manifest as an image only (ex. a red circle) and show a tooltip only in reaction to the 'onover' event. I'm not sure what you mean by a 'container as a hotspot', nor how to use a 1px png in reference to it.

Is there an example of this workaround (IE of a non-flash solution for tooltips in KRPano) anywhere I can take a look at? Or could you drop in pseudocode to demonstrate the point?

Thank you, Sacha.

Quoted

Actually for some strange reason, you CAN NOT have a container as a
hotspot, so you have to go old school and use a 1px transparent png
image type. Then with that as the parent you can have a container being
the child. Make sure to set the height/width for the spacer hotspot.

Similar threads