DD_belatedPNG – фикс PNG24 в IE6

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

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

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

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

Обсуждение:

  1. Михаил

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

    • Alex

      Насчёт его ника не в курсе.

    • Alex

      Естественно проверял. Посмотрите примеры на официальной странице.

        • Alex

          А у вас случаем javascript не отключён?

        • Сергей

          Всегда работало, а у вас не работает… ну-ну :)

          • ilia

            Но ведь я же не нарисовал скриншоты, может быть проблема в том что у меня стоят и ie6 и ie7, на других компьютерах проверял работает. Так что я не зря говорю!

          • Alex

            проблема непосредственно с вашим компом, а не со скриптом.

            скрипт работает отлично и лучше чем IE PNG Fix

  2. читатель

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

  3. Nataly

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

  4. asse

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

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

  6. axdes

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

  7. Пупкин

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

  8. andre

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

    • Alex

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

      • andre

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

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

        • Alex

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

          • andre

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

          • Alex

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

  9. andre

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

    • Alex

      А в примере именно так и сделано сейчас. Одно фоновое изображение, которое при наведении меняет позицию.

      • andre

        а Вы смотрели свой пример в ie6 ?

        • Alex

          Смотрел.
          Что-то не так с примером в IE6?

          • andre

            даже на локалке страница грузится минут 5 а то и дольше

          • andre

            там нет примера со спрайтом и сменой background-position при :hover

          • Alex

            Я имел ввиду проверить там скорость загрузки.

  10. andre

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

    • Alex

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

      • andre

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

        • Alex

          Стоит 8-я версия. Для остальных использую IETester или Virtual PC с ie6.

          • Михаил

            Подскажите где скачать Virtual PC с ie6

  11. Роман

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

  12. Dido

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

  13. Серафим

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

  14. Capa

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

  15. Роман

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

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

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

  16. Du33

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

  17. Тимур

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

  18. Тимур

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

  19. maks_programmist

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

  20. Jane

    Скрипт хороший! Спасибо! Только есть одна проблема. Одна png картинка подгружается с помощью скрипта и прозрачной в ie6 становиться ну никак не хочет. Могли бы Вы посоветовать мне решение данной проблемы? Спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*