Rendering polygonal hotspot above iframe in css3d

1st Official Post

    Hi,

    I would need to render a polygonal hotspot above an iframe hotspot in css3d layer. I've researched this in the documentation and forum, but I didn't find any reasonable explanation for why this is not working. Both hotspots are rendered in css3d using zorder. But for some reason, the iframe is always rendered above the hotspot, it seems there is some other priority in rendering these elements. Is there any way to render the polygonal hotspot over the iframe hotspot?

    Here is an XML:

    Code
    <krpano>
    
    <preview type="grid" />
    <hotspot name="iframeweb01" type="iframe" renderer="css3d" zorder="1" ath="0" atv="0" width="1600" height="1200" scale="0.3" distorted="true" zoom="true" iframeurl="https://www.wikipedia.com/" />
    <hotspot name="polyhs" polyline="true" renderer="css3d" zorder="2" capture="false"  borderwidth="10.0" bordercolor="0xff0000" borderalpha="1">
        <point ath="-30" atv="-30" /> 
        <point ath="30" atv="30" /> 
    </hotspot>
</krpano>

    Thanks in advance for any ideas.

    • Official Post

    Mixing SVG and CSS hotspots is normally not possible.

    The SVG layer is below the hotspots layer.


    Although it would be possible by hacking the internal layer order to move the SVG layer on top...
    E.g. here an action doing this:

    Code
    <action name="svg_hack" type="js">
  if (caller.DATA.svgpoly)
    caller.DATA.svgpoly.parentNode.style.zIndex = 9999;
  else
    krpano.call("delayedcall(0,svg_hack())", caller);
</action>


    Call it in the onloaded event of the polygonal hotspot:

    Code
    <hotspot ... onloaded="svg_hack();" />


    But I wouldn't recommend that because that code uses internal stuff and therefore could fail in future versions.

Participate now!

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

Register Yourself Login