开发者

sIFR dynamically changing the color of text onhover of parent element

I'm using sIFR to style headings and want to dynamically change the color of text (within the flash movie) onhover of parent element.

How would one do this? Any examples? I have never seen it done.

<ul class="tab">
    <li id="tab2">
        <a href="#two">
            <span class="organisation sIFR-replaced" style="">
                <object width="300" height="31" class="sIFR-flash" type="application/x-shockwave-flash" id="sIFR_replacement_5" name="sIFR_replacement_5" data="fla/gothamBook.swf" style="">
                    <param name="flashvars" value="id=sIFR_replacement_5&amp;content=Bureau%2520ICE&amp;width=300&amp;renderheight=31&amp;link=&amp;target=&amp;size=25&amp;css=.sIFR-root%257Bcolor%253A%2523d7d9e3%253Bletter-spacing%253A0.05%253B%257Da%257Btext-decoration%253Ano开发者_如何学JAVAne%253B%257Da%253Alink%257Bcolor%253A%2523d7d9e3%253B%257Da%253Ahover%257Bcolor%253A%2523ffffff%253B%257D&amp;cursor=default&amp;tunewidth=0&amp;tuneheight=0&amp;offsetleft=&amp;offsettop=&amp;fitexactly=false&amp;preventwrap=false&amp;forcesingleline=false&amp;antialiastype=&amp;thickness=&amp;sharpness=&amp;kerning=&amp;gridfittype=pixel&amp;flashfilters=&amp;opacity=100&amp;blendmode=&amp;selectable=true&amp;fixhover=true&amp;events=false&amp;delayrun=false&amp;version=436"/>
                    <param name="wmode" value="transparent"/>
                    <param name="bgcolor" value="transparent"/>
                    <param name="allowScriptAccess" value="always"/>
                    <param name="quality" value="best"/>
                </object>
                <span class="sIFR-alternate" id="sIFR_replacement_5_alternate">Bureau ICE</span>
            </span>
        </a>
    </li>
</ul>

I've tried the following which seems logical... but it doesn't work. It's the span.organisation in the i'm trying to change!

sIFR.replace(gothamBook, {
    wmode: 'transparent',
    selector: 'span.organisation'
    ,css: [
    '.sIFR-root { color: #d7d9e3; background-color:#61648a; letter-spacing:0.05; }'
    ,'a span.organisation { text-decoration: none; }'
    ,'a:link span.organisation { color: #d7d9e3; }'
    ,'a:hover span.organisation { color: #ffffff; }'
  ]
});


Replace the <li> instead, so the link ends up in the Flash movie, then use a:hover for the colors.

The selectors in the css parameter are relative to the replaced element, so a span.organisation won't work because you've replaced span.organisation.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜