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

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

  • 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

    https://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.

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

    Quote

    See the documentation for the textfield plugin

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

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

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

    Quote

    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.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!