Полупрозрачные PNG в IE6 с помощью DD_belatedPNG

24 августа 2009, Написано в Разное

Еще один способ решения проблем полупрозрачных PNG в IE6 — DD_belatedPNG.

DD_belatedPNG использует VML вместо AlphaImageLoader. Соответственно способ не обладает минусами присущими применению фильтра. Инструмент позволяет использовать свойства background-position и background-repeat, а также псевдо-класс :hover. Ссылки и элементы форм в блоке с полупрозрачным фоном остаются кликабельны.

Демо

Использовать скрипт очень просто:

  • Скачайте javascript файл (сжатая версия — 7Kb).
  • Подключите его к странице.
  • Укажите какие элементы необходимо исправить. 
<!--[if IE 6]>
  <script src="DD_belatedPNG.js" type="text/javascript"></script>
  <script type="text/javascript">
    DD_belatedPNG.fix('.png-elem');
  </script>
<![endif]-->

Для fix() требуется указать CSS селектор исправляемого элемента. Если необходимо исправить несколько элементов, нужно указать их через запятую.

На первый взгляд хорошая альтернатива IE PNG Fix, который я использовал раньше.

P.S. На днях ко мне обратился Руслан и предложил взять интервью для своего блога о блогах. Собственно читайте кому интересно. До меня кстати интервью давал Dimox.

48 комментариев к статье «Полупрозрачные PNG в IE6 с помощью DD_belatedPNG»:

  1. virua:
    24 Авг 2009 в 19:54

    Непременно пригодится. В закладки.

    Ответить
  2. Михаил:
    25 Авг 2009 в 08:51

    значит мистер инкогнито – это у нас Руслан, который ak*uba? =)

    Ответить
  3. Полупрозрачные PNG в IE6 с помощью DD_belatedPNG « AI: HTML, CSS и многое другое…:
    25 Авг 2009 в 10:48

    [...] View post: Полупрозрачные PNG в IE6 с помощью DD_belatedPNG « AI: HTML, CSS и мног… [...]

    Ответить
  4. ilia:
    25 Авг 2009 в 10:52

    Что-то у меня в ie6 не работает демо пример, вы сами хоть проверяли?

    http://s55.radikal.ru/i148/0908/09/264b76579163.jpg

    Ответить
  5. читатель:
    25 Авг 2009 в 12:31

    блин, я вот недавно ридер почистил, из 45 блогов оставил 7. твой в их числе. один из самых полезных блогов которые я когда либо встречал.

    Ответить
  6. Nataly:
    8 Сен 2009 в 01:46

    у меня как то не сработало.. возможно что то не учла, хотя проверила код.. радует то что падает количество пользователей шестой версии, и думаю что после Винь7 станет их еще меньше.. так что еще годик и редко кого встретишь за шестеркой

    Ответить
  7. Сиваков:
    12 Сен 2009 в 21:43

    Пробовал. Помогает:).Зачёт

    Ответить
  8. asse:
    14 Сен 2009 в 21:53

    пол года как пользуюсь этим скриптом. Нареканий нет. Удобно и эффективно

    Ответить
  9. Сачивка Игорь (Juicy):
    22 Сен 2009 в 23:31

    Иногда возникают проблемы в IE6 когда фон отображается кусками в сложной вёртске, в остальном уже месяца 4 работает нормально у меня.

    Ответить
  10. axdes:
    23 Сен 2009 в 01:53

    DD_belatedPNG.fix(‘.png-elem’); – вот это лучше в конец скрипта прописать, поскольку пока скрипт не загрузится, прозрачности не будет.
    Да и код страницы красивее.

    Ответить
  11. Пупкин:
    6 Окт 2009 в 21:56

    Вася, вырежи PNG гамму, юзай например TweakPNG или любую другую прогу. Не позорьтесь.

    Ответить
  12. andre:
    20 Окт 2009 в 12:46

    А как же быть когда необходимо создать Rollover?
    Фотовая картинка для IE6 прописывается ведь через vmlBg при загрузке страницы.
    Есть мысли на этот счет?

    Ответить
    • Alex:
      20 Окт 2009 в 13:00

      Посмотрите на демо страницу, там есть пример с :hover у ссылки.

      Ответить
      • andre:
        20 Окт 2009 в 13:20

        я говорю о Rollover, т.е. когда при наведении на картинку (png) появляется другая картинка, которая в одном спрайте, т.е. меняется position-relative.

        в Вашем примере (.png-link:hover{background:red} ) background-image заменяется background-color

        Ответить
        • Alex:
          20 Окт 2009 в 13:33

          Сделать спрайт фоном, не подойдёт?

          Ответить
          • andre:
            20 Окт 2009 в 13:42

            я фоном и делаю.
            Только вот position-relative не меняет картинку для ie6 при эффекте ролловера. Насколько я понял, position-relative для ie6 работает только при загрузке страницы и записывает созданный vml через vmlBg

            Ответить
            • Alex:
              20 Окт 2009 в 13:51

              Если спрайт в качестве фона, то тогда нужно менять не позиционирование а расположение фона у ссылки. Добавил в примере спрайт у ссылки, посмотрите.

              Ответить
  13. andre:
    20 Окт 2009 в 14:06

    да уж, опечатался, конечно же я применяю расположение фона background-position
    Не могли бы Вы у себя в примере не заменять одну картинку на другую, а менять background-position у фоновой картинки. Т.е. надо вначале сделать спрайт состоящий из двух картинок, и при наведении менять видимую область спрайта.
    Вот именно это у меня и не получается сделать.

    Ответить
  14. andre:
    21 Окт 2009 в 08:23

    в официальных примерах грузится быстро, но там не применяется background-position при :hover, а у Вас сейчас применяется. Возможно в нем причина

    Ответить
    • Alex:
      21 Окт 2009 в 11:04

      Сомневаюсь что проблема в этом, как уже заметил у меня скорость загрузки не изменилась. Думаю если бы скрипт обладал подобным минусом, о нем было бы написано.

      Ответить
      • andre:
        21 Окт 2009 в 12:20

        А я где то уже читал о том, что скрипт себя некорректно ведет, когда установлено несколько версий ie одновременно. Это как раз мой случай. У Вас сколько IE стоит?

        Ответить
  15. IнTересные ссылки №2 | IнTересности:
    3 Ноя 2009 в 01:05

    [...] http://www.alexilin.ru/png-and-ie6-with-dd_belatedpng/ – ещё один png-fix для IE [...]

    Ответить
  16. Роман:
    20 Ноя 2009 в 12:10

    Спасибо большое, все работает отлично!

    Ответить
  17. Dido:
    9 Дек 2009 в 09:46

    о, спасибо, искал альтернативный метод прозрачности пнгшки!

    Ответить
  18. Серафим:
    3 Мар 2010 в 12:22

    Все работает. Спасибо. Гораздо лучше, чем IE PNG Fix. Отлично пашет с бэкграундами.

    Ответить
  19. Capa:
    6 Апр 2010 в 13:46

    а подскажите, пожалуйста, можно ли прописать скрипту отрисовку пнгхи, которая стоит на бг, например, в a:hover span?

    Ответить
  20. Роман:
    12 Апр 2010 в 15:48

    Использую DD_belatedPNG для некоторых прозрачных png на сайте http://asia.site-plus.ru. Похоже все работает. Если обновить страницу, то все прозрачные картинки отображаются нормально, но если кликнуть по ссылке еще раз, то прозрачные png, обработанные DD_belatedPNG не отображаются.

    Никто не сталкивался с подобной проблемой? Как это решается.

    Для примера можно посмотреть страницу: http://asia.site-plus.ru/ru/about/

    Ответить
  21. Du33:
    27 Апр 2010 в 20:17

    отлично решение , спасибо
    До этого использовал PNG Behavior ….

    Ответить
  22. Тимур:
    25 Июн 2010 в 16:51

    Есть баг у этого скрипта: создайте несколько одинаковых дивов с одним и тем же классом, и идущими подряд, друг за другом. В класс пропишите фоновое изображение. Подключите скрипт к диву… В итоге получится что фоновое изображение появится только в первом диве, остальные дивы будут пустыми.
    Надеюсь этот баг быстро поправят.

    Ответить
  23. Тимур:
    25 Июн 2010 в 17:51

    Покопав код скрипта понял как этот баг обойти (не исправить, а именно обойти), чтоб всё работало как часы. Вот код с использованием фреймворка jQuery:
    $(function(){
    var els, a;
    els = $(‘*’);
    for(a=0; a<els.length; a++) {
    DD_belatedPNG.fixPng(els[a]);
    }
    }

    Ответить
  24. maks_programmist:
    25 Авг 2010 в 15:25

    Найден баг: скрипт не срабатывает,если PNGшка назначена фоном для ячейки таблицы.

    Ответить

Оставь комментарий: