Как в браузере IE6 добавить рисунок с прозрачностью в формате PNG?

🕛 23.01.2009, 00:33
Благодаря наличию в PNG-24 встроенного альфа-канала, изображения в этом формате поддерживают до 256 уровней прозрачности. Это позволяет создавать истинные полупрозрачные картинки, а также плавные переходы от прозрачной области к непрозрачной. Однако браузер Internet Explorer 6 напрямую не поддерживает эту возможность и чтобы ее реализовать приходится прибегать к различным ухищрениям.
На рис. 1 показано как выглядит картинка с прозрачностью в браузере Internet Explorer 6 (IE6), а на рис. 2 то же изображение в остальных браузерах. В частности, старшие версии IE уже корректно работают с PNG-24.



Рис. 1. Вид картинки в формате PNG-24 в браузере IE6



Рис. 2. Вид картинки в формате PNG-24 в остальных браузерах

Заметно, что в IE6 имеется паразитный фон, от которого и требуется избавиться. Для этой цели нам понадобится прозрачный однопиксельный рисунок в формате GIF и небольшая программа на JavaScript.

Сам рисунок выводится как обычно, но к тегу <IMG> добавляем свой класс opacity, для которого в стилях указываем behavior: url("iepngfix.htc"). Атрибут behavior позволяет в стилях выполнять программы на языке JavaScript, оформленные в виде специального файла с расширением htc (пример 1). 

Пример 1. Вывод прозрачного рисунка в формате PNG

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>IE6, PNG и прозрачность</title> <style type="text/css"> BODY { background: #666; /* Цвет фона */ } IMG.opacity { behavior: url("iepngfix.htc"); /* Механизм для вызова скрипта */ } </style> </head> <body>
 <p><img src="images/op.png" alt="Северо-запад" width="155" height="219" class="opacity"></p>
 </body>
</html>Содержимое файла iepngfix.htc показано в примере 2.

Пример 2. Файл iepngfix.htc

<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script type="text/javascript">
var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;

// Путь к прозрачному однопиксельному рисунку в формате GIF
var blankSrc = "transparent.gif";

if (supported) fixImage();
function propertyChanged() { if (!supported) return; var pName = event.propertyName; if (pName != "src") return; if (! new RegExp(blankSrc).test(src)) fixImage();
};

function fixImage() { var src = element.src; if (src == realSrc) { element.src = blankSrc; return; } if (! new RegExp(blankSrc).test(src)) { realSrc = src; } if (/\.png$/.test(realSrc.toLowerCase())) { element.src = blankSrc; element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')"; } else { element.runtimeStyle.filter = ""; }
}
</script>
</public:component>
Результат использования кода показан на рис. 3.



Рис. 3. Вид изображения в браузере IE6

Атрибут behavior не входит в спецификацию CSS и поддерживается только браузером IE, поэтому желательно скрывать от валидатора стилевой код. Это можно сделать с помощью условных комментариев <!-[if IE]> и <![endif]->, которые понимает только браузер IE. В примере 3 показано их добавление.

Пример 3. Использование условных комментариев

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>IE6, PNG и прозрачность</title> <style type="text/css"> BODY { background: #666; /* Цвет фона */ } </style> </head> <body>
<!-[if lte IE 6]> <style type="text/css"> IMG.opacity { behavior: url("iepngfix.htc"); /* Механизм для вызова скрипта */ } </style>
<![endif]->
 <p><img src="images/op.png" alt="Северо-запад" width="155" height="219" class="opacity"></p>
 </body>
</html>Конструкция if lte IE 6 означает, что применять нижеследующий код следует только для версии IE меньше или равной 6. Из-за того, что в контейнере <STYLE> использование условных комментариев запрещено, они выносятся в <BODY>.