data css dynamic conversion

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

kangsj2277

Trainee

Posts: 43

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,203

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*