В IE 5.0 было сделано одно очень важное нововведение- фильтры. Благодаря этому дизайнер получает доступ к таким визуальным эффектам, которые раньше были доступны только в профессиональных графических редакторах, таких как Adobe Fotoshop или Corel Photopaint. При этом размер паги не увеличивается. К сожалению Netscape Navigator не поддерживает эту фичу. Рассмотрим ближе применение фильтров. Устанавливаются они по средствам свойства filter любого визуального объекта. Самый простой состоит в использовании параметра STYLE в тэге объекта. Например:
IMG SRС="image.gray" STYLE="filter: gray"
Аналогичное действие можно сделать с помощью JavaScript:
image1.style.filter = Gray() Alpha(opacity=50);
При этом объекту, идентифицируемому как image1, будут присвоены фильтры gray и alpha. К фильтру можно обращаться, используя все то же свойство filter. Если к одному объекту применено несколько фильтров, то обращение к ним происходит с помощью массива filters. В процессе работы можно изменять значения аргументов, просто обращаясь к соответствующему фильтру и его свойству. Например:
image1.style.filters[1].opacity=30;
Можно также присвоить фильтр какой-либо переменной и затем работать с ней:
var imagefilter = image2.style. filters[3];
imagefilter.changeColor (0,0,0,255,1);
Фильтр можно удалить, просто присвоив пустую строку свойству filter:
myobject.style.filter = "";
Как вы видите из этих параметров, использовать замечательное нововведение очень просто. Осталось только понять какие бывают фильтры и какие эффекты они придают изображению. В этой статье я расскажу только о фильтре FlipV и FlipH!!! Эти фильтры позволяют зеркально отображать объект по вертикали или горизонтали. Они не имеют параметров:
testimage.style.filter="FlipV()" testimage.style.filter=FlipH()"
Фильтр FlipV() зеркально отображает объект по вертикали, фильтр FlipH() - по горизонтали. Об остальных фильтрах, возможно я расскажу позже.

А сейчас вот несколько примеров фильтра alpha:

Наша кнопка

Можно сделать все несколько быстрей:

Наша кнопка

Ну это вы сами экспереминтируйте, вот код:

Вверх страницы вот такой код:

<SCRIPT>
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){
setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}
clearTimeout(nereidFadeTimers[object.sourceIndex]);
diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;

if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}
</script>


А вот что надо писать при вставки изображения:

<img src="img/88_31_2.gif" width="88" height="31" border="0" onMouseOver=nereidFade(this,100,10,20) style='FILTER: alpha(opacity=30)' onMouseOut=nereidFade(this,30,10,20) alt="Наша кнопка">