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) |
