JavaScript Kit > IE Filters reference > Here
Basic Image Filter
The Basic Image filter lets you perform manipulate the color processing (ie:
gray scale), image rotation, and opacity of a content at once. Defined via IE's CSS filter
property, here is its basic
syntax:
Syntax:
filter: progid:DXImageTransform.Microsoft.BasicImage(attribute1=value1, attribute2=value2, etc);
Syntax (post IE8):
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(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.BasicImage(XRay=1)";
filter: progid:DXImageTransform.Microsoft.BasicImage(XRay=1);
}
</style>
<div id="somediv">Some DIV</div>
Syntax via scripting:
//To define a new Basic Image filter on
an element
object.style.filter ="progid:DXImageTransform.Microsoft.BasicImage(Invert=1,
XRay=0)"
//To get or set an existing property within Basic Image filter
object.filters.item("DXImageTransform.Microsoft.BasicImage").Invert=0;
When getting or setting a specific filter's attribute
via
scripting, you capitalize the attribute
to turn it into a
property.
Below lists the attributes/properties of the Basic Image filter:
Basic Image Filter attributes (properties)
Attributes/ Properties | Description | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
enabled | Sets/ returns whether the filter is enabled or not. Valid values: true/ false |
||||||||||
grayscale | Sets/ returns whether or not to make an element grayscale. Valid values: 1 (true) or 0 (false) Example: <style type="text/css"> Demo (requires IE5.5+):
| ||||||||||
Invert | Sets/ returns whether or not to invert the RGB
colors of a content. Valid values: 1 (true) or 0 (false) Example: <img src="nokia.jpg" onMouseover="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(invert=1)'" onMouseout="this.style.filter=''" /> Demo (requires IE5.5+):
| ||||||||||
mask, maskcolor | Sets/ returns whether or not to replace the
transparent portions of a content with the color value specified in
the maskcolor property.Valid values for " Example: <script type="text/javascript"> | ||||||||||
mirror | Read/write boolean value which determines whether or not to laterally invert the element or not. Valid values: 1 (true) or 0 (false) |
||||||||||
opacity | Sets the opacity level of the Opacity filter, with 0
being fully transparent, and 1 being fully opaque. Read/write
property that has a default value of 0.
(0=fully transparent, 1=fully opaque) Valid values: 0-1 (percentage divided by 100) Example: <style type="text/css"> Demo (requires IE5.5+):
|
||||||||||
rotation | Allows you to rotate the image at angles that are multiples of 90.
Read/write. Valid values:
|
||||||||||
xRay | Read/Write boolean value determinig whether or not
to give the content an X-Ray effect, in other words, as a grayscale
defined by the complement of the average red and green component
values. Valid values: 1 (true) or 0 (false) |