Как заставить цвета работать в sIFR 3 r436?

У меня есть демонстрационная страница здесь; вы можете просмотреть исходный код, чтобы узнать, что я пытаюсь сделать.

Как видите, вроде все работает, кроме цветов. Я пытаюсь установить синий цвет (# 0000ff), но он остается черным. Я создал собственный SWF-файл для своего шрифта, встраивая четыре разных варианта одного шрифта, чтобы учесть разные стили для эти инструкции (потому что это конкретное семейство шрифтов хранит обычный, полужирный, курсив и полужирный курсив в виде четырех непересекающихся имен шрифтов).

Для потомков я вставлю часть исходного кода с той демонстрационной страницы, на которую я ссылался здесь:

<style type="text/css">
h1.sifr {
    color: #0000ff;
    font-family: 'Myriad Pro';
    font-size: 1.75em;
    margin-bottom: 0;
}
</style>
<script type="text/javascript">
var myriad_pro = {src: 'myriad_pro.swf'};
sIFR.activate(myriad_pro);
sIFR.replace(myriad_pro, {
    selector: 'h1.sifr',
    css: {
        '.sIFR-root': {'color': '#0000ff', 'font-family' : 'Myriad Pro'},
        'em': {'color': '#0000ff', 'font-family' : 'Myriad Pro Italic' , 'font-style' : 'plain'},
        'strong': {'color': '#0000ff', 'font-family' : 'Myriad Pro Bold' , 'font-weight' : 'normal'},
        'em strong, strong em': {'color': '#0000ff', 'font-family' : 'Myriad Pro Bold Italic' , 'font-style' : 'plain', 'font-weight' : 'normal'}}
    }
);
</script>

Что я забыл? Как заставить работать цвета?


javascript css flash sifr
person soapergem    schedule 01.12.2009    source источник

Ответы (3)


arrow_upward
0
arrow_downward

У меня он работает здесь. Единственная разница в том, что мой текст sifr заключен в ссылки и меняет цвет при наведении курсора мыши.

Мой сценарий выглядит так:

 <script language="javascript" type="text/javascript">
        //sIFR.useStyleCheck = true;
        var eurostile = {
            src: '/images/eurostile.swf'};
        sIFR.activate(eurostile);
        sIFR.replace(eurostile , {selector: "div#mainNav li", wmode: "transparent", 
        css: [
             'a { text-decoration: none; color: #666666; }'
            ,'a:link { color: #666666; }'
            ,'a:hover { color: #00299b; }'
        ]});
        sIFR.replace(eurostile , {selector: "div.menuHeadingText", wmode: "transparent"
        ,css: [
            '.sIFR-root { color: #FFFFFF; }',
            'a { text-decoration: none; color: #FFFFFF; }'
            ,'a:link { color: #FFFFFF; }'
            ,'a:hover { color: #FF5A00; }'
        ]});

        sIFR.replace(eurostile , {selector: "h2.boxHeading", wmode: "transparent"
        ,css: [
            '.sIFR-root { color: #666666; }'
        ]});

Hope it helps.

/ Клаус

person Klaus Byskov Pedersen    schedule 01.12.2009
comment
Я взял HTML, CSS и JS со страницы, на которую вы ссылаетесь, и изменил их, загрузив вместо этого мой собственный SWF-файл. И цвета работали. Однако это было только с одним единственным шрифтом (Myriad Pro Regular). Когда я попытался смешать разные шрифты, как указано выше (обычный, полужирный, курсив и полужирный курсив), однако, это не сработало - не было никакого текста! Так что, похоже, я могу заставить работать цвета или я могу заставить работать несколько шрифтов, но не оба. - person soapergem; 01.12.2009

arrow_upward
0
arrow_downward

Возможно, вам потребуется ввести значения цвета в верхний регистр, и разве это не должно быть font-style: normal, а не plain?

person Mark Wubben    schedule 03.12.2009
comment
Спасибо за предложение, но это не сработало. = / Вы правы в том, что это font-style: normal, хотя эта часть уже работала, так что я предполагаю, что он просто принял нормальный, когда увидел что-то, что не распознал. Я пробовал # 0000ff, # 0000FF, rgb (0,0,255) и RGB (0,0,255) безрезультатно. - person soapergem; 04.12.2009

arrow_upward
0
arrow_downward

Хорошо, извините, ребята. Оказывается, я просто слишком много думал об этом. В конце концов, я реэкспортировал свой SWF-файл (думаю, в первый раз я мог сделать это несколько неправильно) и значительно упростил свой JavaScript. Я по-прежнему включил встроенную копию всех «четырех» шрифтов в файл Flash - я установил для основного динамического текстового поля Myriad Pro / Regular, а затем создал еще 3 динамических текстовых поля (без текста в них), настроенных на полужирный , Курсив и полужирный курсив соответственно. Затем я убедился, что щелкнул «Встраивание символов» на всех из них и убедился, что нужные мне символы включены.

В итоге мой JavaScript выглядел так:

<script type="text/javascript">
var myriad_pro = {src: 'myriad_pro.swf'};
sIFR.activate(myriad_pro);
sIFR.replace(myriad_pro, {
    selector: 'h1.sifr',
    css: {
        '.sIFR-root': {'color': '#0000ff'}
    }
});
</script>

Мне не нужно было менять шрифты или что-то в этом роде, но я все же должен был убедиться, что все четыре включены в файл Flash. Оглядываясь назад, кажется немного странным, что это сработало, когда я сказал font-family: "Myriad Pro Italic" и т. Д., Поскольку технически это не название шрифта. Но по какой-то причине это вызвало конфликт с цветами, поэтому, когда я просто назвал его простым старым «Myriad Pro» и позволил ему определить курсив и полужирный шрифт, все это сработало. И @Mark - цветные шестнадцатеричные коды строчных / прописных букв значения не имеют. Однако это действительно должен быть полный шестизначный шестнадцатеричный код (т.е. # 00f не будет работать).

person soapergem    schedule 04.12.2009