Фильтр AlphaImageLoader

В последнее время укоренилось предположение - если web-дизайнер хочет использовать частичную прозрачность в дизайне сайта, то у него только два варианта. Или он использует фильтр Alpha, или использует plug-in'ы типа Flash. Тут необходимо сказать, что фильтр Alpha работает только в Internet Explorer'е, да и с прозрачностью во Flash тоже не все гладко.

Однако есть еще один вариант, позволяющий использовать частичную прозрачность. Правда этот пример работает только в Internet Explorer 5.5 или 6.0. Тем, кто в этом сомневаются (и пользуется именно этими браузерами) рекомендую нажать на кнопку play (треугольник в круге), расположенную на изображении слева.

Для создания этого эффекта использовался фильтр AlphaImageLoader. Этот фильтр позволяет расположить изображение между содержимым какого-либо элемента и его фоном. Но самым примечательным является то, что при использовании формата png, данный фильтр так же задействует alpha-канал.

Поэтому если Вы создадите изображение в формате png и при этом определите alpha-канал, то сможете использовать этот alpha-канал при разработке дизайна вашего сайта.

Я использовал в качестве объекта прозрачный пиксель, растянутый по горизонтали и вертикали до квадрата 100х100 пикселей и уже к нему применил данный фильтр. Хотя сам пиксель не виден, но видно изображение, загруженное между этим пикселем и фоном. В качестве фона использовалось изображение девушки. Но это абсолютно не обязательно. Что будет использовать web-дизайнер, зависит только од самого дизайнера. Ниже приведен отрывок из листинга, реализующего данный эффект в этой статье:

<img
 id='img_flow' width=100px height=100px src='/_images/spacer.gif'
 style="position:absolute; visibility:hidden;z-index:1;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
        (src='/_images/articles/alpha.png', sizingMethod='scale');">

Осталось только пояснить параметры фильтра AlphaImageLoader. Как нетрудно догадаться, параметр src определяет адрес, по которому расположено изображение-прослойка, а sizingMethod - что делать, если изображение-прослойка не соответствует размерам элемента. В нашем случае - масштабировать до необходимых размеров.