Полупрозрачность png в internet explorer 6 (png ie)

Как я намучался с этим недобраузером… Вечно что-нибудь именно в нем не работает. Один из самых популярных косяков — некорректное отображение полупрозрачности в картинках формата png в 6 версии недобраузера.

Запишу решение данной проблемы, так как мне еще часто оно понадобится.

1. Итак, создаем файл png.htc

Редактируем его текстовым редактором, вставляем следующий код:

<script>
var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";
if (supported) fixImage();
function propertyd() {
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
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>

2. Далее — закачиваем этот файл в корень сайта. И туда же закачиваем пустой прозрачный gif-файл с именем blank.gif.

3. В html вставляем следующую конструкцию:

<style>
img {
behavior: url("png.htc");
}
</style>

4. Теперь заключительный этап — дописываем полный путь к файлам (абсолютный адрес). Для этого из пункта 1 заменяем строку

var blankSrc = "blank.gif";

на строку вида

var blankSrc = "http://site.ru/blank.gif";

В пункте 3 заменяем строку

behavior: url("png.htc");

на строку вида

behavior: url("http://site.ru/png.htc");

где http://site.ru — адрес вашего сайта. Кстати именно это было моей ошибкой — я не указывал полный адрес файлов.

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.