*.PNG - коректне відображення альфа-каналу в браузерах.
Якщо ви думаєте, що .gif і .jpg при створенні вами веб-сайту не обмежують вашу фантазію, і вас влаштовує постійно «дорізати» тінюшку в .gif `є разом з фоном, то ви можете сміливо забути про можливості .png, а точніше про 24-bit`ну глибину кольору, анти-альясінг і прозорість.
Якщо ви так не думаєте, то спробуємо вирішити проблему з підтримкою .png в ІЕ.
І так, маємо у вихіднику .psd ось такий шматок сайту:
Передбачається, що в html-файлі тег body має смугасто-сірий фон, і він ніби просвічує крізь тінюшку і прозорість. Перший вихід «як оптимізуємо?» Інстинктивно .gif, переважно ось такий: Але цей спосіб всім відомий, і не про нього мова.
Перший вихід з такої ситуації пропонує Microsoft (для браузерів IE 5.5 і вище), вже «зацькований» тією самою організацією.
Їх пропозиція така:Створити прозорий .gif розміром 1x1px і змінити тегimg наступним чином:
! Деx, y координати саме PNG файлу!
І, ура, Експлорер чудово бачить нашу прозорість. У пориві радості (не забуваючи про кросбраузерність) відкриваємо Mozillа і… Так, так. Повністю нічого не бачимо, Mozilla відображає тільки наш «прозорий.gif», який власне і є прозорий.
Але якщо в кінець задуматися, то за ідеєю можна описати скриптом визначення браузера і маючи в потоці html *.png, то будь це ІЕ(5.5-6) додається їх фірмовий фільтр, а будь хто інший все залишається на своїх місцях. Обійшовши всі пошукові системи і пару-трійку імпортних форумів, вивив наступну інформацію:
1. Створюємо знову ж таки прозорий.gif і називаємо його blank.gif2. Завантажуємо ось цей скрипт png.htc (Докладніше на цьому сайті.)2.1. Він, те й описуєпроцес визначення браузера і підміни тегаimg, якщо це потрібно на такий же, але з фільтром для ІЕ(5.5-6). (Інші браузери відображають .png як він є )2.2. Усередині скрипта є такий рядок: Сподіваюся зрозуміло, що змінивши назву файлу прозорого.gifa, не забудемо і в скрипті це вказати.3 . Зберігаємо blank.gif і png.htc в корені сайту!4. Всередині html тегimg для нашого PNG виглядати повиненстандартно, АЛЕ обов'язково з прописанимиwidth іheight.
5. У свій CSS або прямо в потоці html в тегstyle додаємо наступне:
6. Прописуємо в тегimg class=png. Тегimgтепер виглядає так:
У результаті ми отримуємо підтримкупрозорості PNGMicrosoft IE(5.5-6)і вище. Так, і без втрат для Mozilla (NN 6-7, Opera 6-7).
А це саме те, що нам і було потрібно.
Зауважте. Це рішення підходить для браузерівIE5.5і вище; Gecko(Mozilla, Netscape 6-7), Opera 6-7.
А браузери старих версій не розуміють. 6> (кількість картинок для замін не обмежена).
І у нас в наявності повна кросбраузерність (майже:-).
Для цього нам потрібен спеціальний скрипт (Browser Detect), який визначає браузери з максимальною точністю аж до платформ і білдів. Для нас вистачить і скороченої версії. І потрібен другий скрипт, який здійснює заміну.pngна.gif(за цей скрипт окреме спасибі Читачеві(с) і Hokum`u) І в дружній зв'язці ці скрипти визначають браузер відвідувача і підмінюють ( у разі потреби) картинку .png на картинку .gif. Тегimgтепер виглядає так:
Додався параметрnameу мене в скрипті перша картинка у черзі на обмін називаєтьсяgif1.Малюнок може бути хоч п'ятдесят, але врахуйте, що поки сторінка завантажується і поки не завантажаться всі .png скрипт не обробить їх.