Разделы

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

Метки:

Благодаря наличию в PNG-24 встроенного альфа-канала, изображения в этом формате поддерживают до 256 уровней прозрачности. Это позволяет создавать истинные полупрозрачные картинки, а также плавные переходы от прозрачной области к непрозрачной. Однако браузер Internet Explorer 6 напрямую не поддерживает эту возможность и чтобы ее реализовать приходится прибегать к различным ухищрениям.

На рис. 1 показано как выглядит картинка с прозрачностью в браузере Internet Explorer 6 (IE6), а на рис. 2 то же изображение в остальных браузерах. В частности, старшие версии IE уже корректно работают с PNG-24.

Рис. 1

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

Рис. 2

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

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

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

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

<!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="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

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

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

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

<!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="op.png" alt="Северо-запад" width="155" height="219" class="opacity"></p>

 </body>
</html>

Конструкция if lte IE 6 означает, что применять нижеследующий код следует только для версии IE меньше или равной 6. Из-за того, что в контейнере <STYLE> использование условных комментариев запрещено, они выносятся в <BODY>.

Прикрепленный файл	Размер
example-155.zip	14.29 кб

styleroom, 05.11.2008

Отлично Влад!
Спасибо!

Гость, 05.11.2008

а это сработает для картинок вставленных бэкграундом?
если нет - то каково тогда будет решение?

Vlad, 06.11.2008

Нет, приведенное решение работает только для обычных изображений, не фоновых. О решении с фоном в ближайшее время добавлю статью.

Гость, 09.01.2009

хорошая статья!!! спасибо...

Гость, 27.01.2009

заметил баг, при включении jquery, прозрачность не работает

Хурш, 10.06.2009

полупрозрачные img можно обойти, вот только bg не как не могу (да и большинство в этой профессии). Если даже есть способы они не сробатывают для repeat. Таким образом repeat не конает!
(P.S я ваше предлогаю закопать всю продукцию MS, кроме оффиса!)

Пожалуста, если вы нашли способ .png для IE6 напишите!
С уважением Хуршид Шавкатович!

weringods, 21.10.2009

Однозначно в закладки, написано хорошо и понятно, на rss подписался без всяких проблем, спасибо

Разделы

Термины

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

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