Сьогодні проїбав цілий день на реалізацію однієї штуки.
Є такий формат картинок - png.
Що в ньому цікавого?
А те, що він має напівпрозорість, тобто якщо треба зробити плаваючу картинку на неоднокольоровому фоні, а від картинки падає тінь, або хочеться щоб її краї не були кострубатими, або просто щоб вона була напівпрозора, то пнг-файл надає таку можливість.
Але піздець підкрався непомітно.
Хоч видив я його здалеку.
Піздець - це internet explorer.
В ньому замість прозорості вставляється сірий фон. Сьома версія експлорера вирішує цю проблему, але там теж є міни. Але, по порядку:
Виправити проблему прозорості для, здається, версії 5.5 і більше допоможе або бог, або:
1. В каталог з сайтом (індекс.пхп) кладемо даний
джаваскріпт і
гіфку.
2. Поміж тегів <head></head> вставляємо:
(форум, не їж скріпти) script type="text/javascript" src="/fixpng.js"></script (форум, не їж скріпти)
<style>
.iePNG, IMG { filter:expression(fixPNG(this)); }
</style>
3. Для кожно елементу, у якого бекграунд - пнг, або він сам є пнгехою, в тег дописуємо "class="iepng", тобто виглядає ци приміром так
<div>text</div>
4. Тепер, коли ми все зробимо, вигляд значно краще. Але ссилки, що лежать на об'єктах пнг, не працюють, тобто експлорер сприймає їх за звичайний текст. Це фікситься присвоєнням до тегів <a></a> відносної позиції, тобто
style:"position:relative".
5. Щоб не мучитись з кожним посиланням, дописуємо до таблиці стилів простеньку штучку,
.iePNG A { position: relative; },
тобто тепер все в нас виглядає так:
<head>
<title></title>
<script type="text/javascript" src="/fixpng.js"></script>
<style>
.iePNG, IMG { filter:expression(fixPNG(this)); }
.iePNG A { position: relative; }
</style>
От і все.
Ненавидьте інтернет експлорер разом з мною.
Вход
FAQ
Поиск
