WebScript.Ru
C:\   главная  ::   о сайте  ::  каталог скриптов  ::  гнездо  ::  форум  ::   авторам  :: Новостройки ::   ХОСТИНГ  ::

|| разделы::
|| поиск по сайту::

|| реклама::
|| новости почтой::
Рассылки Subscribe.Ru ::



Новости сайта WebScript.Ru
Популярные статьи

Hot 5 Stories

|| рекомендуем::




*.PNG — корректное отображение альфа-канала в браузерах.


Прислал: Веснин Арсений [ 21.05.2003 @ 12:37 ]
Раздел:: [ Веб-технологии ]


   Начну с того, что формат .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 )


 :::::  Likeman пишет 07.06.2003 @ 06:23 
Возникает вопрос, а зачем все это городить. Дело в том, что по сравнению с GIF увеличевается общий объем страницы, а если учесть, что PNG24 картинки не так малы в размерах, то ...

Хотя статься в общем достаточно интересна ...
 :::::  gmarik пишет 09.06.2003 @ 22:35 
То, что я искал. Надо для сайта ...
 :::::  Васик пишет 17.06.2003 @ 15:34 
Спасибо
 :::::  anton пишет 25.06.2003 @ 04:19 
Нет, реально это нафиг не нужно. Можно обойтись и без этого. Статья классная. Работа проделана автором хорошая, но все это реально увеличивает время на создание какой-то пиэнджи-козявки, которую можно спокойно (при некотором знании css и html) заменить на такую же гиф-козявку или даже джейпиджи-козявищу. :D
С уважением к автору статьи, Антон Граник.
 :::::   пишет 02.07.2003 @ 12:43 
Anton,
prejde chem zaevlyat chto nit podobnoe - vozmi i prochti pro vse vozmojnosti PNG!

http://www.libpng.org/pub/png/
 :::::  vady пишет 28.07.2003 @ 15:21 
бррр, то что надо!
 :::::  manowar пишет 29.07.2003 @ 11:09 
Правильная статья, а на счёт гифа, то данный формат, с некоторых пор, стал не бесплатным и поэтому пнг является чень хорошей заменой.

P.S. А микрософт гонит ....

 :::::  Raistlin_Madjere пишет 23.08.2003 @ 18:52 
статья харошая .. до этого момента я не знал как их под мелко совтом показать .. большое мерси автору .. только мателький правакационый вопрос .. а по чему в статье гивки не порядок :D
 :::::  Andy пишет 26.08.2003 @ 16:52 
Блин!!! Класс!!! Я даже не имел представления о том, что картинки можно таким образом подменять. 8)
 :::::  Дмитрий Беляков пишет 22.07.2004 @ 14:49 
Молодец, Арсений.
Большое спасибо.
 :::::  baikman пишет 11.09.2012 @ 09:23 
Не сразу обратил внимание на даты...
от PNG, конечно, в пользу империи зла :) отказываться не хочется, но время жмёт (как обычно), поэтому быстренько
перебрасываю в .jpg, например, и...
О, Великий Влад Мержевич - явись нам! :)
htmlbook.ru/faq/kak-ustanovit-izobrazhenie-poluprozrachnym
раз html запрещён... :)
*style*
.transparent75 {
filter: alpha(Opacity=75); /* Полупрозрачность для IE */
opacity: 0.75; /* Полупрозрачность для других браузеров */
}

.transparent50 {
filter: alpha(Opacity=50);
opacity: 0.5;
}
/*....и т.д.*/
*/style*
...

*img src="images/cat.jpg" alt="Непрозрачность 75%"
width="250" height="243" class="transparent75"*
Имя:
Email:
URL

Введите сумму двух чисел девять и шесть (девять+шесть=?)
Запомнить мою информацию

* Html запрещен* Ваш E-mail опубликован не будет.

Copyright © 2000-2001 WebScript.Ru nas@webscript.ru
Design © 2001 by Parallax Design Studio (aka Spectator.ru)
Все торговые марки и авторские права на эту страницу принадлежат их соответствующим владельцам.
Сгенерировано за: 0.0149889