data css dynamic conversion

Beginner

Monday, April 8th 2019, 3:32am

data css dynamic conversion

Is it possible to dynamically modify a css field created with the data tag to a property such as hover? If so, what should I do? *sad*

Go to the top of the page

Tuur

Sage

Posts: 3,184

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

Monday, April 8th 2019, 12:17pm

Hi,

there are different ways of doing this.
I think this is the most clear one for you now.

<layer ... onover="set(css, data:css_txt_hover);" onout="set(css, data:css_txt);" />

So you make another <data thing that contains the looks you like when hovering and call it onover.

Something like this could also work,

Source code

     <font 
        base="font-family:Helvetica;text-align:center;"
        size="16"
        size_hover="20"
        color="000000"
        color_hover="ff0000"
    />
    

    <layer name="txt" keep="true" type="text" align="center" html="hover me" css="calc:font.base + 'font-size:' + font.size + 'px;color:#' + font.color +';'" vcenter="true" padding="10 20" onover="DressTxt(over);" onout="DressTxt(out);"  />

    <action name="DressTxt">
        if(%1 == over,
            set(layer[get(name)].css,calc:font.base + 'font-size:' + font.size_hover + 'px;color:#' + font.color_hover +';');
        ,
            set(layer[get(name)].css, calc:font.base + 'font-size:' + font.size + 'px;color:#' + font.color +';');
        );
    </action>

There are more ways to Rome though, i would say it all depends on your structure and wishes.

Hope it helps,
Tuur *thumbsup*