Прозрачный Png в IE6

Author Автор: Роман Чернышов    Опубликовано: 26 сентября 2010

Прозрачный Png в IE6При верстке шаблона, перед нами очень часто встает проблема корректного отображения прозрачных / полупрозрачных изображений в формате PNG, в нашем «любимом» браузере IE6. Проще говоря, прозрачности вообще нет, вместо нее мы видим сплошной фон определенного(как правило, серого) цвета. Отказываться от формата PNG в пользу GIF не хочется, а иногда это просто невозможно. И дизайнеры в последнее время стали нас все чаще баловать полупрозрачными тенями, отливами и прочими фишками художественной графики.

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

1) — «прозрачный png вставляем как картинку»:

<img src="images/png-image.png" width="100" height="50" style="behavior: url(images/png.htc);"> <!-- этот style прописываем для любого полупрозрачного png -->

в стилях картинки прописываем параметр behavior и подгружаем файл images/png.htc, следующего содержания:

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

для нормального отображения картинки также понадобиться специальная прозрачная картинка GIF 1×1 images/transparent.gif

2) — «PNG вставляем как бэкграунд используя CSS и выводим только в IE»

Код на странице будет выглядеть очень просто, всего в одну строку:

<div id="image_png"></div>

Задаем стиль для этого дива

#image_png{
height:200px;  /* значение высоты и ширины указываем как размер картинки*/
width:210px;
 background: url(image.png);  /* пишем бэкграунд для нормальных браузеров */
 -background: none;  /* убираем бэкграунд для ie6 */
 -filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='image.png', sizingMethod='scale');  /* подгружаем полупрозрачный png для ie6 */
}

3) — «Используем JavaScript для нормального отображения PNG»

Этот способ вообще является самым удобным и простым, но имеет свои недостатки, например если у пользователя в браузере будет отключена поддержка JavaScript, то картинка будет отображаться без прозрачности, представьте если на сайте очень богатый и насыщенный дизайн и таких картинок много.

Но тем не менее для реализации этого метода, в начало страницы, между тегами вставляем:

<!–[if lt IE 6.]–>
 <script type="text/javascript" src="pngfix.js" mce_src="pngfix.js"></script>
 <!–[endif]–>

содержание файла pngfix.js

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
 
if ((version >= 5.5) && (document.body.filters))
{
 for(var i=0; i<document.images.length; i++)
 {
 var img = document.images[i]
 var imgName = img.src.toUpperCase()
 if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
 {
 var imgID = (img.id) ? "id='" + img.id + "' " : ""
 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
 var imgStyle = "display:inline-block;" + img.style.cssText
 if (img.align == "left") imgStyle = "float:left;" + imgStyle
 if (img.align == "right") imgStyle = "float:right;" + imgStyle
 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
 var strNewHTML = "<span " + imgID + imgClass + imgTitle
 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
 + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
 img.outerHTML = strNewHTML
 i = i-1
 }
 }
}

4) — «Конвертация PNG в GIF»

Есть еще такие варианты как конвертация PNG в GIF при этом прозрачность сохранится и отлично будет обрабатываться IE6, но как я писал в начале статьи перейти на другой формат в некоторых случаях просто невозможно.

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

Автор блога
Чернышов Роман
Роман Чернышов
Веб-разработчик, Full Stack
Senior, Architector
PHP, JavaScript, Node.JS, Python, HTML 5, CSS 3, MySQL, Bash, Linux Admin
Заказать работу
предложить оффер

Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка