вторник, 17 июня 2008 г.

Епаный PNG с градиентом (transporant) в Internet Explorer

Блина, оказывается сделать вывод корректный PNG с transparnt-слоем, достаточно проблематичная штука (что бы в Inter Explorer от 6.0 пахала, Fire Fox ну и Opera).

Что это за хитрый слой? ну допустим вам на основную картинку нужно вывести картинку, которая содержит прозрачные точки... Получается красиво, но ...тень полная.

Проблема номер 1.
Как вывести тупо IMG с градиентом/транспорантом - проблем нет.

Для примера пишем:
<img style="BEHAVIOR: url(png.htc)" height="12" src="http://www.blogger.com/png-test-files.png" width="12" />

где png.htc типа хака (можно взять тут) - http://textlibrary.ru/files/png.htc

---------------
Проблема номер 2.
Как вывести допустим для боковой рамки налаживаемую тень на имеющийся под ней слой. То есть картинка вставляеться как фон, допустим таблицы (при этом высота не заданна - то есть любая, до 1000 пикселей):

В HTML для ячекий таблицы пишем что-то такое:
.........
<td class="png" width=""><img height="1" alt="" src="http://www.blogger.com/spacer.gif" width="12" />

..........

В CSS пишем такое для класса png:
.png {
background: url('png-test-files.png');
-background-image: none;
-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=png-test-files.png,sizingMethod=crop);
}
........
где png-test-files.png - наш фоновый рисунок размером допустим 12 на 1000 пикселей.

---------------
Проблема номер 3.

Как вывести графическую кнопку PNG с ховерсом.

В HTML для кнопки пишем следующий код:
.........
<div class="testclass"><a href="http://www.blogger.com/index.php"><img height="14" alt="" src="http://www.blogger.com/spacer.gif" width="38" /></a></div>

.........

В CSS пишем такое для класса testclass:
.testclass a{
background: url('home.png');
background-repeat: no-repeat;
display: block;
width: 38px;
line-height: 14px;
height: 14px;
-background-image: none;
-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=home.png,sizingMethod=crop);
cursor:pointer
}

.testclass a:hover{
background: url('home_h.png');
background-repeat: no-repeat;
-background-image: none;
-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=home_h.png,sizingMethod=crop);
}

Где home.png - оригнальный вид графической кнопки, home_h.png - графическая кнопка при наведении на не курсора мыши.

Вообщем в итоге, поразмыслев решил что можно от варианта №1 вообще отказаться.

Главная проблема которая возникла при работе с PNG, совсместимость с Internet Explorer 6.0 :)

Комментариев нет: