Одним из самых потрясающих дополнений версии 7 браузера Internet Explorer стала поддержка прозрачности изображений PNG. Как уже было сказано в главе 3 при обсуждении фоновых изображений, с помощью изображений в формате PNG действительно можно достичь прозрачности: их можно отображать поверх фона различных цветов без пиксельного гало-эффекта и использовать для создания визуальных эффектов с применением непрозрачных фоновых слоев. Однако если вы просто разместите такие изображения на странице, пользователи Internet Explorer 6 увидят непрозрачные картинки, как показано на рис. 7.5. Есть ли какой-нибудь способ обойти этот досадный недочет и подружить IE6 с PNG?

Рис. 7.5. Отображение прозрачных изображений PNG в Internet Explorer 6

Страницы  тестировались в програме IETester в режиме IE6

Решение
Чтобы изображения в формате PNG отображались в Internet Explorer 6 прозрачными, придется использовать небольшой сценарий на Java-Script. Он был создан Аароном Будманом (Aaron Budman) и в дальнейшем доработан Дрю МакЛелланом (Drew McLellan) с тем, чтобы обеспечить поддержку фоновых изображений.

Прежде всего создадим прозрачный GIF размером 1×1 px и сохраним его под именем x.gif.
Затем создадим новый файл сценария на JavaScript (который будет предназначен только для Internet Explorer 6) и добавим в него следующий код:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

var bgsleight	= function() {
	
   function fnLoadPngs() {
      var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
      var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
      for (var i = document.all.length - 1, obj = null; (obj = document.all[i]); i--) {
         if (itsAllGood && obj.currentStyle.backgroundImage.match(/\.png/i) != null) {
	    fnFixPng(obj);
	    obj.attachEvent("onpropertychange", fnPropertyChanged);
	 }
	 if ((obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position == ''){
	 obj.style.position = 'relative';
			
	 }
      }
   }

   function fnPropertyChanged() {
      if (window.event.propertyName == "style.backgroundImage") {
	 var el = window.event.srcElement;
	 if (!el.currentStyle.backgroundImage.match(/x\.gif/i)) {
	    var bg	= el.currentStyle.backgroundImage;
	    var src = bg.substring(5,bg.length-2);
	    el.filters.item(0).src = src;
	    el.style.backgroundImage = "url(x.gif)";
	 }
      }
   }

   function fnFixPng(obj) {
      var mode = 'scale';
      var bg	= obj.currentStyle.backgroundImage;
      var src = bg.substring(5,bg.length-2);
      if (obj.currentStyle.backgroundRepeat == 'no-repeat') mode = 'crop';
      obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" 
          + src + "', sizingMethod='" + mode + "')";
      obj.style.backgroundImage = "url(/img/shim.gif)";
   }
	
   return {
      init: function() {
         if (navigator.platform == "Win32" && navigator.appName == 
             "Microsoft Internet Explorer" && window.attachEvent) {
				addLoadEvent(fnLoadPngs);
         }
      }
   }
}();

bgsleight.init();

Чтобы данный сценарий выполнялся только в Internet Explorer 6, его нужно добавить с помощью условных комментариев:

<!--[if IE 6]>
<script type="text/javascript" src="bgsleight.js"></script>
<![endif]-->

Если вы сохраните страницу на данном этапе и откроете ее в Internet Explorer, окажется, что фоновое изображение элемента div с идентификатором content исчезло. Его можно вернуть, задав ему свойство height.
Достаточно значения 1%, поскольку Internet Explorer 6 интерпретирует его как минимальный размер элемента и будет растягивать блок до тех пор, пока он не сможет вместить все вложенные элементы. Поскольку это правило стиля предназначено только для Internet Explorer, его нужно разместить либо внутри элемента style в заголовке head вашего документа, либо добавить в созданную специально для этого браузера таблицу стилей, привязанную к документу с помощью условных комментариев:

<!--[if IE 6]>
<style type=”text/css”>
#content {
height: 1%;
}
</style>
<script type=”text/javascript” src=”bgsleight.js”></script>
<![endif]-->

Обновите страницу в Internet Explorer, и вы увидите, что поверх фона будет отображаться прозрачная заливка, как показано на рис. 7.6.

Рис. 7.6. Отображение прозрачных изображений PNG в Internet Explorer 6

Обсуждение
Использование описанного приема может вызвать массу других неприятностей. Например, может возникнуть впечатление, будто некоторые области страницы покрыты фоновым изображением, делая ссылки недоступными для перехода, а поля для ввода текста – не принимающими фокус. Эту проблему чаще всего можно решить, добавив элементу описание position:relative;, однако это также усложняет нашу задачу. Тем не менее благодаря возможности использования полностью прозрачных изображений можно добиться большей гибкости дизайна, а если подходить к делу тщательно и аккуратно, все будет отлично работать.

Если у вас IE6, вы можете протестировать отображение прозрачных картинок, открыв страницу demo