*.PNG — корректное отображение альфа-канала в браузерах.
Начну с того, что формат .PNG мог бы сделать революцию в веб-дизайне, если бы Microsoft IE
поддерживал его формат.
Не буду вдаваться в подробности, почему Microsoft не хочет поддерживать png,
поскольку по этому вопросу давно уже создана целая организация,
которая пытается «заставить» их сделать это.
Но мы пойдем другим путем. Попробуем решить эту проблему.Если вы думаете, что .gif и .jpg при создании вами веб-сайта не ограничивают вашу фантазию,
и вас устраивает постоянно «дорезать» тенюшку в .gif`е вместе с фоном, то вы можете
смело забыть про возможности .png, а точнее про 24-bit`ную глубину цвета , анти-альясинг и прозрачность. Если вы так не думаете, то давайте попробуем решить
проблему с поддержкой .png в ИЕ. И так, имеем в исходнике .psd вот такой кусок сайта:
 Предполагается, что в html-файле тэг body имеет полосато-серый фон,
и он как бы просвечивает сквозь тенюшку и прозрачность.
Первый выход «как оптимизируем?» — инстинктивно .gif, преимущественно вот такой:
Но этот способ всем известен, и не о нем речь. Начнем с того, что в исходнике .psd убираем не нужные слои из-под тени и заливки.
=> 
Сохраняем этот кусок как .png-24 с прозрачностью (transparency).
В потоке html прописываем свой красивый фон (здесь полосато-серый) и вставляем наш .png
Открываем наш html-файл в Эксплорере (!да, кстати если вы работаете в дримвивере он в
режиме просмотра может показать .png корректно! Не верьте ! )
Эксплорер автоматически подкладывает серый фон.
(Opera 5.11 — белый фон, NN4 — вообще жуть.)
Затем открываем его же (файл) в Mozille (Netscape6-7, Opera 6-7)
Поддержка есть. Но, статистику браузеров не обманешь. Первый выход из такой ситуации предлагает Microsoft (для браузеров IE 5.5 и выше),
уже «затравленный» той самой организацией. (ссылка) Их предложение таково:
Создать прозрачный .gif размером 1x1px и
изменить тэг img следующим образом:
< img src="прозрачный.gif" width="x" height="y"
style=" filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ваш.png'); " >
! Где x, y координаты именно PNG файла !И, ура, Эксплорер прекрасно видит нашу прозрачность.
В порыве радости (не забывая про кроссбраузерность) открываем Mozillа и…
Да, да. Ровным счетом ничего не видим, Mozilla отображает только наш «прозрачный.gif»,
который собственно и есть прозрачный. Но если в конец задуматься , то по идее можно описать скриптом определение браузера
и имея в потоке html *.png, то будь это ИЕ(5.5-6) добавляется их фирменный фильтр,
а будь кто другой все остается на своих местах.
Обойдя все поиcковики и пару-тройку импортных форумов,
выудил следующую информацию: 1. Создаем опять же прозрачный.gif и называем его blank.gif
2. Скачиваем вот этот скрипт png.htc (Подробнее на этом сайте.)
2.1. Он, то и описывает процесс определения браузера
и подмены тэга img, если это требуется на такой же,
но с фильтром для ИЕ(5.5-6).
(Остальные браузеры отображают .png как он есть)
2.2. Внутри скрипта есть такая строчка: var blankSrc = «blank.gif»;
Надеюсь понятно, что изменив название файла прозрачного.gifa,
не забудем и в скрипте это указать.
3. Сохраняем blank.gif и png.htc в корне сайта!
4. Внутри html тэг img для нашего PNG выглядеть
должен стандартно,
НО обязательно с прописаными width и height.
< img src="наш.png" width="100" height="150" border="0" alt="" >
5.В свой CSS или прямо в потоке html в тэг style
добавляем следующее:
< style >img.png {behavior: url(«png.htc»);}< /style >
6.Прописываем в тэг img class=png.
Тэг img теперь выглядит так:
< img src="наш.png" width="100" height="150" border="0" alt="" class="png">
В итоге Мы получаем поддержку прозрачности PNG в
Microsoft IE(5.5-6) и выше. Да, и без потерь для Mozilla (NN 6-7, Opera 6-7).А это именно то, что нам и было нужно.
P.s.
Заметьте.
Данное решение подходит для браузеров IE5.5 и выше;
Gecko(Mozilla, Netscape 6-7), Opera 6-7. А браузеры старых версий не понимают .png как класс,
поэтому для них создается скрипт, который в зависимости от их версии и типа подменивает
наш .png на такой же .gif (кол-во картинок для замен не ограничено). И у нас на лицо полная кроссбраузерность (почти:-). Для этого нам нужен специальный скрипт (Browser Detect),
который определяет браузеры с максимальной точностью вплоть до платформ и билдов.
Для нас хватит и сокращенной версии.
И нужен второй скрипт, который
осуществляет замену .png на .gif
(за этот скрипт отдельное спасибо Читателю(с) и Hokum`u)
И в дружной связке эти скрипты определяют браузер посетителя и подменяют (в случае необходимости)
картинку .png на картинку .gif.
Тэг img теперь выглядит так:
< img src="наш.png" width="100" height="150" border="0" alt="" class="png" name="gif1">
Добавился параметр name у меня в скрипте первая картинка
в очереди на обмен называется gif1.Картинок может быть хоть пятьдесят, но учтите, что пока
страница грузится и пока не загрузятся все .png скрипт не обработает их.Для наглядности смотрите сурс/source— designcollector.ru/. P.s.s
Подводя итог скажу что увидит посетитель в браузере IE5.0(NN4, Opera5):
— сначала загрузится .png с серой подложкой, потом наш финальный скрипт сменит .png
на почти идентичный .gif А вот что увидит посетитель в браузере IE5.5.-IE6.0:
— загрузится .png с серой подложкой, а потом сработает png.htc
и наложит сверху фильтр с прозрачным gif`ом, причем так, что в параметрах картинки мы увидим только инфу
о нашем прозрачном gif`e.
Браузеры NN6-7, Mozilla балгодаря тому же png.htc освобождаются от прозрачного gifa и работают
с .png как часы. P.s.s.s
Есть более сложный метод
решения проблемы отображения альфа-канала формата PNG. И он позволяет отображать
альфа-канал .png в background`е, css`e и т.п.
Смотрите, читайте, применяйте. Желаю удачи. Автор: Веснин Арсений ( Arsart )
| 
|| разделы::
