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

Author Роман Чернышов    Category CSS, JavaScript / jQuery     Tags , , , Комментариев 0 Дата 26 Сен

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

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

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

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

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

<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>
var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) &amp;&amp; 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>
</public:component>

для нормального отображения картинки так же понадобиться специальная прозрачная картинка 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»

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

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

<![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, но как я писал в начале статьи перейти на другой формат в некоторых случаях невозможно.

Постовой. Для анализа сайта с целью выявления ошибок на нем и дальнейшего повышения прибыли, а также конверсии, стоит обратиться к специалистам сервиса http://sitepolice.ru/ (проверка сайтов). Длительное сотрудничество показало высокую степень их квалификации и надежность в предоставляемых услугах.

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

О блоге и авторе

Добро пожаловать на блог веб-разработчика! На протяжении многих лет, начиная с 2009 года, я занимаюсь созданием специализированных сайтов, сервисов и крупных веб-порталов. Мною было создано несколько сотен сайтов, большинство из которых работают на ПО созданном под заказ, а также на готовом ПО которое я разрабатываю на протяжении всего периода моей деятельности. Это: CMS "Совместные покупки", CMS "osRealty", CMS "Спорт прогнозы" и многое другое.

На страницах моего блога вы найдете множество информации о программировании, о появлении новых разработок, сможете ознакомиться с товарами и услугами которые я предоставляю. А также сможете получить консультацию, заказать разработку сайта или приобрести готовое решение, для реализации собственного проекта.

Поиск по блогу
Категории
Архив
Новое на сайте
Блогеры пишут
  • Роман Чернышов: Для работы капчи на PHP 5.6, замените в файле class.captcha.php строку 264 $ifunc( $this -> i [...]
  • Роман Чернышов: Схема такая: 1) На сайте есть виртуальные кошельки (далее ВК) 2) При пополнении пользователем ВК, [...]
  • Александр: Может скрипт комментариев блокирует сообщения с кодом? Или как длинный текст не проходит?
  • Александр: Пытаюсь в который раз здесь показать код, но страница обновляется, и не сообщения, ни любого оповеще [...]
  • Роман Чернышов: Лично у меня интерес к продаже ссылок пропал уже давно. Преимущество сапы, это то - что ссылки можно [...]
Портфолио Все работы


www.detskiy-mir.net
www.detskydoctor.ru
www.betelit.ru
www.all-alliance.ru
www.videogonok.ru
www.carpfishing.by
www.property-greek.com
www.domcons.ru

с 2009 года по сегодняшний день, создано более 300 сайтов...