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);
Example using inline CSS:
<div style="width: 90%; filter:progid:DXImageTransform.Microsoft.BasicImage(XRay=1);">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: <img src="dog.gif" style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);" /> | ||||||||||
| 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=''" /> | ||||||||||
| 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: <img id="mydog" src="dog.gif" style="filter:
progid:DXImageTransform.Microsoft.BasicImage(opacity=0.1);" /> |
||||||||||
| 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) |
