Как Dropbox заставляет их прозрачную PNG + непрозрачность работать в IE? - PullRequest
Новая
       23

Как Dropbox заставляет их прозрачную PNG + непрозрачность работать в IE?

0 голосов
/ 10 декабря 2010

Я вижу, что на www.dropbox.com изображение watch_a_video2.png является прозрачным изображением PNG с непрозрачностью, установленной на 0,5.Когда вы наводите на него курсор мыши, изменяется непрозрачность.

Как они работают, чтобы не иметь темного контура вокруг изображения watch_a_video2.png с IE7 / 8?

Я не вижу ни одного фильтра илиопределенная библиотека исправлений IE ...

Я пытаюсь воспроизвести их стиль с помощью Jquery, и он отлично работает с Firefox / Safari, но у меня получается темный контур с IE.

Спасибо за вашу помощь.

alt text

1 Ответ

1 голос
/ 10 декабря 2010

Они используют прототип (JavaScript-фреймворк, вроде JQuery). Этот код, кажется, для достижения эффекта (другими словами, они не просто используют CSS): 

document.observe("dom:loaded", function () { 

    var play_link = $("playvideo");

    play_link.observe("mouseover", function () {
        new Effect.Opacity(play_link.down("img"), { duration: 0.2, to: 1.0 });
    });

    play_link.observe("mouseout", function () {
        new Effect.Opacity(play_link.down("img"), { duration: 0.2,  to: 0.5 });
    })


    if (!FlashDetect.versionAtLeast(9)) {
        $("has_flash").hide();
        $("no_flash").show();
    }
});

HTML-код, к которому относится этот код: 

<a href="#" id="playvideo" onclick="play_screencast(); return false;">
    <img src="images/watch_a_video2.png"  alt="Watch a video about Dropbox."/><br />
    Watch a Video
</a>

Вам, вероятно, придется установить что-то подобное и в CSS: 

a {text-decoration:none;}
img { border:none;}
/* of course you'd probably want to use a class or id on these elements */

Приведенное выше css удалит подчеркивание со ссылки, а рамку с изображения.

Наконец, если вы можете опубликовать свой фактический код, это может быть полезно (мне не удалось увидеть синий контур в IE8).

...