Прозрачный PNG в IE 5-6

Прозрачный PNG и Internet Explorer

Речь пойдет о поддержке браузером Internet Explorer популярного графического формата Portable Network Graphic (PNG). Значение этого типа изображений в веб-дизайне трудно переоценить: это практически единственный формат картинок с поддержкой альфа-канала.

Формат PNG разработан для замены устаревшего и более простого формата GIF. Но морально устаревшие браузеры не в состоянии одинаково отображать png-файлы. Проблемным местом является эта самая прозрачность.

Проблема поддержки 32-битной (полной) прозрачности картинки формата PNG в Microsoft Internet Explorer была решена только в седьмой версии браузера. Для остальных версий IE есть несколько способов, которые помогут веб-разработчику добиться прозрачности путём включения в веб-страницу специальных функций и скриптов.

Реализация прозрачности PNG в IE 5-6

Чтобы полноценно пользоваться всеми прелестями альфа-канала в png, нужно заменить серый фон, который генерирует IE на прозрачный. Сделать это можно простым скриптом, подставляющим вместо этого серого фона пустой прозрачный gif.

Секрет этой реализации основан на использовании фильтра AlphaImageLoader, представленном в IE5.5 и выше.

Синаксис:

<element style= "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)" ... >

PNG-изображение с альфа-каналом загружается посредством фильтра, который показывает его в пределах объекта, а также между фоном объекта и контента, с возможностью кадрирования или изменения размеров изображения.  Фильтр AlphaImageLoader поддерживает прозрачность от 0 до 100% и  кроме того, служит хорошим решением для масштабирования изображения.

<img src="blank.gif" style="width: 100px; height: 100px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale')" />

См. MSDN для более подробного изучения.

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

Исходный код

Теперь нам нужно создать код, который все это обработает. Все, что нам нужно сделать, это проверить атрибут src и если это PNG-изображение, мы применяем фильтр и заменяем src реального изображения на прозрачное gif-изображение. Чтобы узнать, когда произойдет замена в src, мы отслеживаем событие onpropertychange. Если src не PNG-изображение, мы удаляем фильтр. Чтобы сделать это легче, мы модифицируем runtimeStyle объект, вместо style объекта. RuntimeStyle объект может рассматриваться как экстра стиль CSS, который имеет приоритет над обычным объвленным стилем. При задании runtimeStyle старые значения до сих пор хранятся в стиле объекта, как только runtimeStyle сбросит значения старого стиля будут применяться, как обычно.

Ниже приводится полный исходный код. Обратите внимание, что код будет работать только, если пользователь использует IE5.5+ на 32-разрядной Windows-платформе.

<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>

var supported = /MSIE (5.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";

if (supported) fixImage();

function propertyChanged() {
 if (!supported) return;

 var pName = event.propertyName;
 if (pName != "src") return;
 // if not set to blank
 if ( ! new RegExp(blankSrc).test(src))
 fixImage();
};

function fixImage() {
 // get src
 var src = element.src;

 // check for real change
 if (src == realSrc) {
 element.src = blankSrc;
 return;
 }

 if ( ! new RegExp(blankSrc).test(src)) {
 // backup old src
 realSrc = src;
 }

 // test for png
 if ( /.png$/.test( realSrc.toLowerCase() ) ) {
 // set blank image

 element.src = blankSrc;
 // set filter
 element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
 }
 else {
 // remove filter
 element.runtimeStyle.filter = "";
 }
}

</script>
</public:component>

Использование

Использовать данный скрипт действительно очень просто. Все, что нужно сделать, это назначить тегу img PNG behavior.

<style type="text/css">

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

</style>

Примечания

Обратите внимание, что behavior использует изображение под названием "blank.gif". Это изображение должно находится в том же каталоге, где находится веб-страница, использующая behavior, иначе вам придется изменить behavior-файл.

Вы не должны использовать другие визуальные фильтры изображений с PNG behavior, потому что эти фильтры могут не поддерживать альфа-каналы и, скорее всего, негативно повлиять на результат.

Руководство по установке скрипта

1. Размещаем скрипт pngbehavior.htc, например, в директории /inc/.
2. Указываем путь к прозрачному gif`у, например так:

var blankSrc = "/i/blank.gif";)

1. В CSS объявляем класс .png

   .png {behavior: url(/inc/pngbehavior.htc);}

   или используем хак для старых ИЕ

   * html img, div {behavior: url(pngbehavior.htc);}

2. В HTML PNG-изображению с прозрачностью назначаем класс .png:

   <img src="/i/transparent.png" class="png" width="50" height="50" title="png-файл с прозрачностью" alt="прозрачный png-файл" >

   Примечание: обязательно укажите размеры, иначе IE сожмет подопытное изображение в точку.

Описанный способ давно и успешно используется многими веб-разработчиками.

Альтернативный вариант решения проблемы прозрачности PNG в ИЕ, описан в посте «JavaScript, который делает способным ИЕ5.5-8 поддерживать веб-стандарты».