690
 
Главная » Internet Explorer » Новый скрипт для исправления прозрачных PNG в IE6

Новый скрипт для исправления прозрачных PNG в IE6

17 июля 2008 Internet Explorer, скрипты 15

Для исправления старой проблемы с прозрачными PNG в IE 6, я часто пользовался скриптом IE PNG Fix, который использовал behavior для исправления этого бага. Этот скрипт благополучно исправлял как простые изображения, так и фоновые, однако одна проблема все же существует – это невозможность растягивать изображение при помощи background-repeat.

Вчера я узнал о новом скрипте Unit PNG Fix, который может исправлять прозрачность изображений и при этом растягивать их. Заметьте, не повторять изображение, а именно растягивать, потому что свойство filter не позволяет повторять элементы. Это конечно не идеальный вариант и не для всех фоновых изображений подойдет, но все же таким образом можно симулировать повторение. Этот скрипт использует JavaScript вместо behavior для исправления прозрачности.

Unit PNG Fix

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

<script type="text/javascript" src="unitpngfix.js"></script>

Как и аналогичные скрипты, он требует также пустой gif файл clear.gif (входит в дистрибутив). Размер скрипта всего 1 килобайт.

скачать

Добавить в закладки:
Maklay.com - Большой каталог товаров для спорта и активного отдыха

Комментарии на “Новый скрипт для исправления прозрачных PNG в IE6”

  1. Витя 20 июля 2008 в 16:54

    По-моему ИЕ 6 уже никто не пользуется ))

  2. NikoDim 31 июля 2008 в 7:31

    Нашел ошибку!

    Если у элемента с прозрачным png на фоне указан отступ сверху и(или) снизу (padding), то скрипт увеличивает высоту элемента еще на отступ(ы) (padding-top, padding-bottom). Для устранения этой проблемы сделал следующее:

    вместо строки:

    es.height=el.clientHeight+’px’;

    написал:

    var ht = el.clientHeight;
    var pt = el.currentStyle.paddingTop.replace(’px’, ”);
    var pb = el.currentStyle.paddingBottom.replace(’px’, ”);
    if (pt) ht -= pt;
    if (pb) ht -= pb;
    es.height = ht+’px’;

    теперь все работает правильно и высота отображается верно=)

  3. NikoDim 31 июля 2008 в 7:43

    даже можно оптимизировать, и вот так написать:

    var ht = el.clientHeight – el.currentStyle.paddingTop.replace(’px’, ”) – el.currentStyle.paddingBottom.replace(’px’, ”);
    es.height = ht + ‘px’;

  4. NikoDim 31 июля 2008 в 7:49

    и даже так:

    es.height=(el.clientHeight-el.currentStyle.paddingTop.replace(’px’,”)-el.currentStyle.paddingBottom.replace(’px’,”))+’px’;

  5. admin 31 июля 2008 в 11:35

    @NikoDim
    Интересно. Надо отправить этот баг создателям скрипта.
    По моему вместо replace можно и так сделать:
    parseInt(el.currentStyle.paddingTop)
    Впрочем, это мелочи …

  6. Элла 1 октября 2008 в 10:25

    Спасибо за скрипт, весь инет облазила – единственный скрипт который у меня заработал!

  7. Serg_pnz 26 января 2009 в 7:47

    Как приспособить эту функцию к конкретному рисунку и конкретному событию?
    Т.е. что бы функция срабатывала после movepic.

    function movepic(img_name,img_src) {
    document[img_name].src=img_src;
    }


  8. admin 26 января 2009 в 10:29

    @Serg_pnz
    Точно не могу сказать, возможно нужно вызвать функцию pngfix() из movepic. Не лучший конечно же вариант, ибо скрипт заново будет обрабатывать все изображения на странице.
    Есть вариант самому поправить скрипт, вот только жаль, что для скачивания доступна только сжатая версия :)
    В скрипте выборка изображения делается так:
    pngfix=function(){var els=document.getElementsByTagName(’*'); …}
    Думаю можно просто изменить немного функцию pngfix, чтобы она получала первым параметром селектор для выборки нужных элементов. Потом из movepic вызывать pngfix с id изображения.

  9. Serg_pnz 26 января 2009 в 13:15

    Победил ))))

    var es=document[img_name].style;
    var clear=”clear.gif”;
    es.height=document[img_name].height;
    es.width=document[img_name].width;
    es.filter=”progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”+document[img_name].src+”‘,sizingMethod=’crop’)”;
    document[img_name].src=clear;

  10. Serg_pnz 26 января 2009 в 13:44

    Окончательная версия под все браузеры и аттач примера тут
    http://www.ponedelnikov.net/index.php?name=Forums&op=showtopic&id=1256&pagenum=1#2

  11. admin 26 января 2009 в 13:49

    @Serg_pnz
    Спасибо за ссылку

  12. alexpts 22 июня 2009 в 18:57

    Ребят, привет. Использую тоже скрипт для лечение прозрачности png в IE, и я так понимаю у меня padding тоже прибавляется. Подскажите пожалуйста, что в нем поправить нужно или поправьте сами, я в js почти ничего не понимаю. В самой последней строке, перечисляются элементы, в которых нужно вылечить прозрачность. Сам скрипт находится – http://alexpts.ru/download/scripts/fixie.js

  13. SergAntDnepr 18 июля 2009 в 13:25

    Проблема в Opere 9.64 – изображение вообще исчезает! Что делать?

  14. admin 18 июля 2009 в 14:54

    @SergAntDnepr
    Подключайте его только для IE 6, для остальных ведь нет надобности:
    <!–[if lt IE 7]>
    <script type=”text/javascript” src=”/js/unitpngfix.js”></script>
    <![endif]–>

  15. SergAntDnepr 18 июля 2009 в 19:36

    Да, работает, СПАСИБО!

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

JSToolbox создан на основе WordPress