Устранение бага с прозрачностью формата PNG в Internet Explorer (IE 5.5 и IE 6)

Пока накидаю кучу ссылок найденных в сети по этому поводу, потом надо до конца разобраться.

Тест альфа-прозрачности вашего браузера http://www.libpng.org/pub/png/pngs-img.html

Просто статьи о формате PNG:
http://www.umade.ru/log/2004/12/54.html
http://www.gagin.ru/internet/3/18.html

Как увидеть PNG с прозрачностью в Internet Explorer

На сайте Microsoft (http://support.microsoft.com/kb/294714) описан следующий способ показа PNG-файлов с прозрачностью:

Фиксация бага с помощью HTC-файла с Javascript написанным Эриком Арвидссоном (Erik Arvidsson): http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html)
Внизу странички можно скачать тестовый примерчик. Из файлов вам понядобятся только pngbehavior.htc и blank.gif.
Файлы кладутся в корень сайта, а в стилях прописываем следующую строку для тега IMG:

img {
   behavior:url("pngbehavior.htc");
}

Теперь все наши PNG-изображения при просмотре в IE будут загружаться через фильтр. Кроме того скрипт позволяет устанавливать фильтр при замене изображения через Javascript.

Есть и баг. При отсутствии у исходного PNG-файла атрибутов width и height загружаемый вместо него blank.gif естественно устанавливает размеры области в 1px и наше изображение исчезает.
Чтобы исправить это открываем файл pngbehavior.htc и правим код двух функций (мои добавления выделены жирным).
Функция propertyChanged()

function propertyChanged() {
   if (!supported || isPrinting) return;
   var pName = event.propertyName;
   if (pName != "src") return;
   // if not set to blank
   if (!new RegExp(blankSrc).test(src)) {
      realImage = new Image();
      realImage.src = element.src;
      element.width = realImage.width;
      element.height = realImage.height;
      fixImage();
   }
};
 

Функция fixImage()

function fixImage() {
   // get src
   var src = element.src;
   // check for real change
   if (src == realSrc && /\.png$/i.test(src)) {
      element.src = blankSrc;
      return;
   }
   if ( ! new RegExp(blankSrc).test(src)) {
      // backup old src
      realSrc = src;
   }
   // test for png
   if (/\.png$/i.test(realSrc)) {
      width = element.width;
      height = element.height;
      // set blank image
      element.src = blankSrc;
      // set filter
      element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
                        "AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
      element.width = width;
      element.height = height;
   }
   else {
      // remove filter
      element.runtimeStyle.filter = "";
   }
}
 

Теперь исправленный файл позволяет не задавать ширину и высоту изображения, а определяет их "на лету" устаналивая нужные значения для области работы фильтра. Причем это поведение сохраняется и при замене изображения JavaScript'ом.

Чтобы пофиксить баг в Drupal (собственно, ради этого мною все и затевалось) добавляем в CSS-файл темы стиль:

img {
   behavior:url("/themes/mytheme/pngbehavior.htc");
}
 

В файле патча pngbehavior.htc находим строку

var blankSrc = "blank.gif";
 

Правим ее на

var blankSrc = "/themes/mytheme/blank.gif";
 

Файлы pngbehavior.htc и blank.gif копируем в папку темы mytheme. Обратите внимание, что название папки должно совпадать с той темой, которую используете вы.

Окончательное решение проблемы

И собственно есть тотальное решение проблемы (http://jquery.andreaseberhard.de/pngFix/)
Пока не смотрел как сделано.
А какой-то добрый человек сделал модуль для друпала... :) Интересная штука сеть, велосипед в соседнем магазине, находится после того как и сам его изобрел.

PNG Fix для Drupal (http://drupal.org/project/pngfix)
Который почему-то не работает с background... Установил, включил, добавил стили и селекторы использующие PNG в background-image. Видно, что патч работает... Фоны в IE исчезли вообще. Потом удалось разобраться, что проблема в том что в блоке с неустановленными явно размерами, данный fix приводит к тому, что слой сжимается толи в ноль, то ли в однопиксельную точку. Поэтому, применяя его необходимо обязательно задавать размеры блока в стилях.

Фоновые изображения

Обстоятельная статья Цыгырлаша Игоря на тему PNG-прозрачности. http://www.tigir.com/alpha_png.htm
В частности в ней и предлагается метод устранения этого бага для фоновых картинок с помощью Ява-скрипта. Для этого определяется CSS селектор для элементов с PNG-фоном вида:

селектор { filter:expression(fixPNG(this)); }

Далее к документу присоединяется JS-файл, содержащий эту функцию. Функция проверяет изображение у нас или фоновая картинка и если это формат PNG, то соответствующим образом загружает его через фильтр.
Собственно, и предыдущий метод использует Javascript, только он спрятан в отдельном HTC-файле. Правда, решение с HTC-файлом мне нравится больше. Изящнее что ли. Постараюсь переделать решение Игоря для фоновых картинок в таком виде.

Исчо сцылочки

http://msdn2.microsoft.com/en-us/library/ms532969.aspx

http://designcollector.ru/png
http://www.mongus.net/pngInfo/
http://www.howtocreate.co.uk/alpha.html
http://www.twinhelix.com/css/iepngfix/

http://www.pzone.ru/docs/web/graphics/png.html

А то на собственных проектах такие косяки. :)