Categories:

JavaScript Kit > IE Filters reference > Here

Alpha Filter

Last updated: October 27th, 2008

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 (pre IE8):

filter: progid:DXImageTransform.Microsoft.Alpha(attribute1=value1, attribute2=value2, etc);

Syntax (post IE8):

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(attribute1=value1, attribute2=value2, etc)";

Note: See "Difference in syntax between pre IE8 and IE8+ browsers" for more info on the changes to the filter syntax in IE8+.

Example:

<style type="text/css">

#somediv{
width: 90%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}

</style>


<div id="somediv">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 the Alpha filter by the filter's name
object.filters.item("DXImageTransform.Microsoft.Alpha").Property1=value1

//To access the Alpha filter using 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:

<style type="text/css">
#mydog{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
</style>


<img id="mydog" src="dog.gif" />

<script type="text/javascript">
//Change image opacity to 50 instead via JavaScript
document.getElementById("mydog").filters.item("DXImageTransform.Microsoft.Alpha").Opacity=50
</script>
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:

Value description
0 (uniform/default) Applies the Opacity value evenly across the object. Default setting.
1 (linear opacity) Applies an even opacity gradient beginning with the Opacity value on a line from StartX to StartY and ending with the FinishOpacity value ending on a line from FinishX to FinishY.
2 (radial opacity) Applies an even opacity gradient beginning in the center with the Opacity value and ending at the middle of the sides of the object with the FinishOpacity value. The corners of the object are not affected by the opacity gradient.
3 (rectangular opacity) Applies an even opacity gradient beginning at the sides of the object with the Opacity value and ending at the center of the object with the FinishOpacity value.

Depending on the style value set, additional attributes (highlighted above in bold) can be added on top of it to customize the effect.

Example:

<style type="text/css">
#adiv{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10, FinishOpacity=90, Style=2)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10, FinishOpacity=90, Style=2);
width: 100px;
height: 100px;
background-color: black;
color: white;
}
</style>


<DIV id="adiv">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 style is set to 1 (linear).
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 style is set to 1 (linear).

Example:

<style type="text/css">
#adiv2{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10, FinishOpacity=90, Style=1, StartX=20, FinishX=100, StartY=30, FinishY=80";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10, FinishOpacity=90, Style=1, StartX=20, FinishX=100, StartY=30, FinishY=80;
width: 100px;
height: 100px;
background-color: blue;
color: white;
}
</style>


<DIV id="adiv2">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 style is set to 1, 2, or 3.
Reference List
[an error occurred while processing this directive]

CopyRight (c) 2018 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info