Фильтр 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='/articles/images/alpha.png', sizingMethod='scale');">
Осталось только пояснить параметры фильтра AlphaImageLoader. Как нетрудно догадаться,
параметр src определяет адрес, по
которому расположено изображение-прослойка, а sizingMethod - что делать, если
изображение-прослойка не соответствует размерам элемента. В
нашем случае - масштабировать до необходимых размеров.
