Реализация png и Internet Exporer с помощью css, javascript и php

PNG и IE: CSS

Использовании для IE фильтра AlphaImageLoader.

1. Вставляем CSS файл fix-ie6.css только для IE5.5 и 6 в разделе head html документа.



2. Помечаем селектором(айдишником или классом) в каком контейнере будет png графика.
3. Описываем в общем файле стилей, например в styles.css, свойства контейнера #png_wrap.

#png_wrap {
background-image: url(/src/to/image/image.png) no-repat;
width:100px;
height:100px;
}

4. Прописываем в файле fix-ie6.css фон для этого контейнера с использованием фильтра AlphaImageLoader

#png_wrap {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/src/to/image/image.png', sizingMethod='crop');
}

5. Если нужно добавить кликабельность контейнера, можно внутрь контейнера поместить прозрачный гиф внутри ссылки. Например:
<div id=«png_wrap»>
<a title=«Example» href=«example.com»>
<img title=«Example» src=«clear.gif» alt=«Example» width=«100» height=«100» />
</a>
</div>

Недостатки решения AlphaImageLoader:

— Необходим дополнительный контейнер для каждой картинки.

Преимущества решения AlphaImageLoader:

+ Простота использования
+ Валидный код

Подробная информация про свойства фильтра AlphaImageLoader

PNG и IE: JavaScript

Существует огромное количество библиотек JavaScript для борьбы с проблемой IE и PNG. Они загружаются при полной загрузке страницы и обрабатывают png графику. Каким образом изменяют графику — это уже вопрос другого обзора. Теперь рассмотрим наиболее интересные варианты:

jquery.pngFix.js — плагин на основе API jQuery

Свойства плагина jquery.pngFix.js

• Работает с фоновыми изображениями
• Работает с кликабельными изображениями
• Работает с атрибутами alt, title, styles и class изображения

Установка:

1. Скачать jQuery
2. Скачать pngFix
3. Подключить в заголовке head скаченные файлы
   
   <script type=«text/javascript» src=«jquery-latest.pack.js»></script>
   <script type=«text/javascript» src=«jquery.pngFix.js»></script>
   
4. Активировать плагин pngFix. Вставлять можно и в заголовок head и в тело страницы body
   
   <script type=«text/javascript»>
   $(document).ready(function(){
   $(document).pngFix();
   });
   </script>
   

Недостатки jquery.pngFix.js

— Не всегда корректно позиционируется в IE
— забирает себе событие document.ready

Преимущества jquery.pngFix.js

+ легек в использовании и установке
+ с помощью селекторов в jQuery плагину можно указать чтоб он обрабатывал только картинки

ie7-js — Google JavaScript библиотека

Свойства плагина jquery.pngFix.js

• Работает только с изображениями
• Работает с кликабельными изображениями
• Работает с изображениями, которые имеют вид *-trans.png

Установка:

1. Скачать Google ie7-js
2. Подключить в заголовке head скаченный файл
   
   
   
3. Переименовать необходимые файлы в такой вид *-trans.png

Недостатки jie7-js Google

— большой размер (72 Кб)
— не работает с повторяющимся фоновым изображением

Преимущества jie7-js Google

+ очень прост в установке

IE PNG Alpha Fix

Свойства библиотеки IE PNG Alpha Fix

• Автоматическая активация прозрачности
• Работает с картинками
• Работает с фоновыми изображениями
• Поддерживает ролловеры
• Работает на основе .htc файла
• вставляет если нужно ссылку для кликабельности

Установка IE PNG Alpha Fix

1. Скачиваем и разархивируем архив iepngfix.zip
2. Копируем iepngfix.htc в любое место
3. Прозрачный gif из архива копируем в корень сайта. Если же копируем в какую-то папку /folder/, тогда в файле iepngfix.htc нужно указать путь к прозрачному гифу
   
   var blankImg = '/folder/blank.gif';
   
4. Указываем или в css или в html, какие контейнеры буду содержать png графику. Путь должен быть относительным к html фалу.
   
   <style type=«text/css»>
   img, div { behavior: url(folder2/iepngfix.htc); }
   </style>
   

Недостатки IE PNG Alpha Fix

— работает на основе .htc

Преимущества IE PNG Alpha Fix

+ прост в установке и использовании
+ широкие возможности

IE и PNG: php

Вся обработка страници по замене png записей происходит на стороне сервера с помощью php или другого языка. Примеров много. Вот одни из них:

replacePngTags.php от koivi.com

Установка

1. Скачиваем архив http://koivi.com/ie-png-transparency.zip
2. Копируем на сервер replacePngTags.php
3. В файле в котором нужно работать с png графикой вставляем инициализируем функцию
   <?php ob_start(); ?>
   
4. В конце этого файла вставляем такой код:
   
   <?php
   include_once 'replacePngTags.php';
   echo replacePngTags(ob_get_clean());
   ?>
   

+ не нужно править html код, только добавить подключение функции в движок