Использование PNG-изображений с альфа-каналом(прозрачность) в браузере Internet Explorer 6.0


Вы хотели бы использовать в дизайне сайта картинки с прозрачными и полупрозрачными областями, но InternrtExplorer6 не поддерживает отображение таких картинок.

Вариант 1. Для занятых

В разделе HEAD html-файла перед закрывающим тегом (<\head>) добавьте такую строчку:

<script type="text/javascript" src="http://iyyi.narod.ru/js/png2.js"></script>

Внимание! Это будет работать, если Ваш сайт находится на хостинге Народ.ру!

Вариант 2. Для остальных.

Для браузера InternetExplorer 6.0 в таблице стилей для изображений нужно записать следующее правило:

img{ filter:expression(fixPNGimg(this)); }

Создать или скачать однопиксельный прозрачный gif-файл: empty.gif и разместить его на своем сайте.

Подключить к страничке следующий Java Script (либо отдельным файлом, либо встроить в страничку):

function fixPNGimg(e){
  var src;
  /MSIE (5\.5|6).+Win/.test(navigator.userAgent) &&
  e.tagName=='IMG' && /\.png$/.test(e.src) && 
  (src=e.src) && (e.src="/i/empty.gif") &&
  (e.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "')");
}

Файл png.js.

В тексте скрипта строку "/i/empty.gif" поменять в соответствии с расположением файла empty.gif на Вашем сайте.

Обратите внимание, png-картинки будут отображаться даже, если в браузере отключены изображения!!!

Вот как это может выглядеть в коде вашей страницы

<style type="text/css">
img{ filter:expression(fixPNGimg(this)); }
</style>
<script type="text/javascript">
function fixPNGimg(e){
  var src;
  /MSIE (5\.5|6).+Win/.test(navigator.userAgent) &&
  e.tagName=='IMG' && /\.png$/.test(e.src) && 
  (src=e.src) && (e.src="/i/empty.gif") &&
  (e.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "')");
}
</script>