Позволю себе внести посильный вклад в общечеловеческую проблему прозрачности .png-картинок во всеми любимом браузере Internet Explorer версии 6. Если вам пока не ясно в чем же состоит эта проблема, откройте сегодняшнюю статью этим браузером, и вы сразу увидете в первом абзаце неопрятную картинку, с серым фоном.
Эта проблема решается только двумя способами — использовать javascript, или не использовать png. Но поскольку абсолютно отказаться от использования картинок в формате .png, нет никакой возможности, то мы рассмотрим первый вариант.
Png-фиксеров огромное количество, я расскажу о двух из них, которыми пользуюсь сама. Оба фиксера представляют собой плагины к JQuery, следовательно легко подключаются, и очень просто используются.
JQuery PngFix
Скачать можно с официальной страницы, там же расписаны подробные инструкции по использованию, но если вам лень читать, что ж, можно и перевести. Все довольно просто скачиваете последнюю версию библиотеки JQuery и сам плагин на вышеуказанной странице, и подключаете их в документ, примерно так:
<head> ... <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.pngFix.js"></script> ... </head>
Далее остается активировать png-фиксер на странице:
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>
После этих нехитрых действий, наша страница в ie6 преобразится, и прозрачные png-картинки будут выглядеть как положено.
Недостатки
А сейчас положенная ложка дегтя, потому что не все так замечательно, как можно подумать. Первое и наверное самое главное, этот скрипт, увеличит время загрузки страницы в ie6. Чем больше png-картинок на странице, тем дольше загрузка.
Второе — забудьте о png-картинках, заданных в качестве фона, хотя и заявлено что он прекрасно фиксит картинки в фоне, на практике это не всегда так. Причем неважно имеет картинка прозрачные области или нет, PngFix может сильно ее исказить, если она повторяется по горизонтали или вертикали.
Ifixpng improved
Скачать плагин можно отсюда. Для его использования вам также понадобится однопиксельная картинка pixel.gif, которая почему-то не входит в архив с плагином. Так что можете скачать ее здесь. Эту картинку необходимо положить в папку с картинками, причем желательно чтобы эта папка называлась images.
Далее точно также подключаем JQuery и плагин в разделе head:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.ifixpng.js"></script>
После чего активируется он следующим образом:
<script type="text/javascript">
$(document).ready(function(){
$("#block").ifixpng();
});
</script>
Если же, папка, в которой расположена картинка pixel.gif, отличается от названия images, можно указать ее расположение в коде:
<script type="text/javascript">
$(document).ready(function(){
$.ifixpng('media/pixel.gif');
$("#block").ifixpng();
});
</script>
Недостатки
Недостатки аналогичные, не очень быстро, не умеет множит png-картинки в фоне, и то что каждую png-картинку, нужно указывать вручную. Тем не менее, я использую именно этот плагин, в том случае, если мне нужно профиксить одну или две прозрачные картинки, потому что в этом случае он не пытается фиксить все подряд png, искажая первоначальный вид.
Вообще конечно, все верстальщики и я в том числе, живут надеждой, что IE6 когда-нибудь пропадет как страшный сон, но пока он есть, вам предоставляется еще одна возможность заставить его корректно отображать прозрачность в png-картинках.
ИЕ6 скоро умрет.
А пока потерпим ещё немного ).
да как будто он уже умер.
Притом уже реально около года заказчики в один голос утверждали, что IE6 им уже неважен. Только совесть заставляла следить, чтобы вёрстка хотя бы не разваливалось напрочь в старичке.
А вот нынче заказчик захотел тряхнуть стариной. А я и забыл уже все тонкости за ненадобностью.
Автору спасибо за статью.
Спасибо, почерпнул…
Как и все веб-разработчики жду смерти ИнвалидЭксплорера! Ох, пьет он нашу кровь!
Must die, must die, this Invalid Explorer must die!
Есть еще третий способ, если png использовать как фон, то можно воспользоватся свойством filter в css для ie6
Правда там другая проблема, невозможно использовать Repeat
но если у вас однопиксельный градиент то без проблем подойдет Scale (растягивание)
По-моему оба плагина, один из них точно, использует filter, если вы имеете в виду AlphaImageLoader, а png в фоне, в 80 процентах случаев, требует repeat, к сожалению.
Все скрипты используют filte, другого способа просто нет(и никогда небыло), я к тому, что если немного приложить мозг, то можно пользоватся фильтром без JS, в таком случае удастся избежать противного мерцания серого фона при загрузке и лишнего JS кода, ведь в css фильтр прописать не сложнее чем background, а проблема с повтором в 80% случаев решаема.
PNGfix скрипты есть смысл использовать только при использовании динамического контента, когда нет возможности привязать его из CSS ну или когда просто лень :).