JavaScript Kit > IE Filters reference > Here
Alpha Filter
The Alpha filter lets you modify the opacity (transparency) of an element on
the page. Defined via IE's CSS filter property, here is its basic
syntax:
Syntax:
filter :progid:DXImageTransform.Microsoft.Alpha(attribute1=value1, attribute2=value2, etc);
Example using inline CSS:
<div style="width: 90%; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);">Some DIV</div>
Syntax via scripting:
//To define a new Alpha filter on an element
object.style.filter ="progid:DXImageTransform.Microsoft.Alpha(attribute=value1,
attribute2=value2)"
//To access an existing property within the Alpha filter via filter's name
object.filters.item("DXImageTransform.Microsoft.Alpha").Property1=value1
//To access an existing property within the Alpha filter via the
filters[] object
object.filters[x].Property1=value1 //where "x" is
the position of the filter within list of filters on element
When getting or setting a specific filter's attribute via
scripting, you capitalize the attribute to turn it into a
property. For example, attribute1 becomes Property1.
Below lists the attributes/properties of the Alpha filter:
Alpha Filter attributes (properties)
| Attributes/ Properties | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| enabled | Sets whether the filter is enabled or not. Default
is true.Valid values: true/ false |
||||||||||
| opacity | Sets the opacity level of the Opacity filter, with 0
being fully transparent, and 100 being fully opaque. Read/write
property that has a default value of 0. Valid values: 0-100 (percentage implied) Example: <img id="mydog" src="dog.gif" style="filter:
progid:DXImageTransform.Microsoft.Alpha(opacity=100);" /> |
||||||||||
| style | Sets/ returns the style of the
opacity filter. There are 4 opacity styles in total, each with
additional corresponding attributes to fine tune the effect. Default
value is 0. Valid values:
Depending on the style value set, additional attributes (highlighted above in bold) can be added on top of it to customize the effect. Example: <DIV style="width: 100px; height: 100px; background-color: black; color: white; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=10, FinishOpacity=90, Style=2)">Some div</DIV> Demo (IE 5.5+ required to view):
Some div |
||||||||||
| startX, finishX | Sets/ returns the horizontal positions in which the gradient
starts and ends. The valid range of values are from 0-100,
translating into a percentage coordinate relative to the width of
the entire element. Valid values: 0-100 (percentage implied) Note: This attribute is
applicable only when |
||||||||||
| finishX, finishY | Sets/ returns the vertical positions in which the gradient
starts and ends. The valid range of values are from 0-100,
translating into a percentage coordinate relative to the width of
the entire element. Valid values: 0-100 (percentage implied) Note: This attribute is
applicable only when Example: <DIV style="width: 100px; height: 100px; background-color: blue; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=10, FinishOpacity=90, Style=1, StartX=20, FinishX=100, StartY=30, FinishY=80">Some div</DIV> Demo (IE 5.5+ required to view): Some div |
||||||||||
| finishOpacity | Sets/ returns the opacity level in which the gradient ends
(0=fully transparent, 100=fully opaque). Default is 0. Valid values: 0-100 (percentage implied) Note: This attribute is
applicable only when |
