Categories:

JavaScript Kit > IE Filters reference > Here

Basic Image Filter

Last updated: October 27th, 2008

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

#dog{
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

</style>

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

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 "mask": 1 (true) or 0 (false)
Valid values of "maskcolor": 32-bit ARGB format color values (ie: 0x00000000, 0X0000ff, or 0xFFFFFFFF)

Example:

<script type="text/javascript">
var mydiv=document.getElementById("test")
mydiv.style.filter ="progid:DXImageTransform.Microsoft.BasicImage(mask=1, maskcolor=0X0000ff)"
</script>

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

#mydog{
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=0.1)";
filter: progid:DXImageTransform.Microsoft.BasicImage(opacity=0.1);
}

</style>

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

<script type="text/javascript">
//Change image opacity to 0.5 instead via JavaScript
document.getElementById("mydog").filters.item("DXImageTransform.Microsoft.BasicImage").Opacity=0.5;
</script>

Demo (requires IE5.5+):

rotation Allows you to rotate the image at angles that are multiples of 90. Read/write.

Valid values:

Value Description
0 0 Degrees (No Change)
1 90 Degrees
2 180 Degrees
3 270 Degrees
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)


Reference List

[an error occurred while processing this directive]

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.