Mar 09

IE6 очень плохо работает с изображениями в PNG-формате, которые имеют альфа-канал (проще говоря, прозрачность) - он просто не учитывается. Решить проблему довольно просто, самый удобный вариант - воспользоваться “библиотекой” jQuery.ifixpng, которая сделает всё за вас. Единственный недостаток (хотя, кому как) - зависимость от jQuery. Тем, кто пользуется другими библиотеками, в частности, PrototypeJS (а именно она по умолчанию используется в таких фреймворках как RubyOnRails и Symfony), воспользоваться этой “библиотекой” не получится. Именно для них я и попытался переписать эту библиотеку.

Prototype.Browser.Version = (navigator.userAgent.toLowerCase().match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1];
Prototype.FixPNG = { Pixel: 'images/pixel.gif' };

Element.addMethods({
  fixpng: (Prototype.Browser.IE && Prototype.Browser.Version < 7) ? function(element) {
    function fixPosition(element) { if(element.style.position != 'absolute') element.style.position == 'relative'; }
    function filter(src) { return "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='" + src + "')"; }
    var elementName = element.nodeName.toLowerCase();
    if(elementName == 'img' || elementName == 'input') {
      if(element.src && element.src.match(/.*\.png([?].*)?$/i)) {
        element.setStyle({
          filter: filter(element.src),
          width: element.getWidth(),
          height: element.getHeight()
        });
        element.src = Prototype.FixPNG.Pixel;
        fixPosition(element);
      }
    } else {
      var image = element.currentStyle.backgroundImage;
      if (image.match(/^url\(["']?(.*\.png([?].*)?)["']?\)$/i)) {
        element.setStyle({
          filter: filter(RegExp.$1),
          backgroundImage: "none"
        });
        element.children().each(fixPosition);
      }
    }
  } : function(element) {}
});

Зависимости:

  • Библиотека PrototypeJS
  • В директории images должен лежать “пустой” файл pixel.gif (его можно взять здесь, или, если вас не устраивает такое расположение файла - просто измените переменную Prototype.FixPNG.Pixel)

Пример использования:

Event.observe(window, 'load', function() {
  $$('.test, #test').each(function(element){ element.fixpng() });
}, false);

PS. Также советую почитать раздел Known Limitations на странице jQuery.ifixpng.

written by fxposter \\ tags: , ,


8 Responses to “IE6 PNG Fix для PrototypeJS”

  1. 1. Дмитрий Пленкин Says:

    Вообще, jQuery можно использовать вместе с другими фреймворками. В том числе и с PrototypeJS.

    Подробности – в документации по jQuery: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

  2. 2. FX Poster Says:

    А я где-то написал, что нельзя? Вроде нет – я имел ввиду, что использовать jQuery.ifixpng напрямую с другими js-фреймворками не получится. Подключить еще и jQuery можно… Но стоит ли это делать, если нужна оттуда нужна лишь одна функция? ИМХО, нет.

  3. 3. crash Says:

    Или подгрузить для ослика behavior, 1 строку не по стандарту можно :)

  4. 4. FX Poster Says:

    Этот, что ли? Фигня. Он не работает в том случае, если png стоит в background-image.

    PS. в jQuery.ifixpng не зря много кода написано, behavior отнюдь не все моменты учитывает, которые могут встретиться.

  5. 5. Yuri Baburov Says:

    нафига свой писать-то?!
    я вариантов этого fixpng уже штук 10 видел. часть реализаций не зависит вообще от фреймверков и достаточно компактная.
    вот например обсуждение со ссылками: http://forum.mootools.net/viewtopic.php?pid=31982

  6. 6. FX Poster Says:

    Реализации нормальной для PrototypeJS я не видел. Для jQuery она есть. Вот я и портировал её на PrototypeJS.

  7. 7. Дмитрий Пленкин Says:

    Сорри, Я фразу про “воспользоваться этой “библиотекой” не получится” отнес на счет jQuery в целом, т.к. jQuery.ifixpng воспринимаю скорее не как библиотеку, а как плугин.

  8. 8. freelancer Says:

    давняя проблемма. спасибо за решение!

Leave a Reply