JavaScript Kit > IE Filters reference > Here
Blur filter
The Blur filter adds a blur to the given content to make it appear out of
focus. Defined via IE's CSS filter property, here is its basic
syntax:
Syntax:
filter :progid:DXImageTransform.Microsoft.Blur(attribute1=value1, attribute2=value2, etc);
Example using inline CSS:
<div style="width: 90%; filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);">Some DIV</div>
Syntax via scripting:
//To define a new Blur filter on
an element
object.style.filter ="progid:DXImageTransform.Microsoft.Blur(attribute=value1,
attribute2=value2)"
To access an existing property within the Blur filter:
object.filters.item("DXImageTransform.Microsoft.Blur").Property1=value1;
//To access an existing property within the Blur filter via 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.
Below lists the attributes/properties of the Blur filter:
Blur Filter attributes (properties)
| Attributes/ Properties | Description |
|---|---|
| enabled | Set whether the filter is enabled or not. Default is true.Valid values: true/ false |
| pixelRadius | Read/Write value, which determines the size of the pixel that is formed to blur the element.
Default is 2. Valid values: 1 to 100 Example: <img src="test.gif" style="filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);" onMouseover="this.filters.item(0).enabled=false" onMouseout="this.filters.item(0).enabled=true" /> |
| makeShadow, ShadowOpacity | Optional attributes that decides whether to display
the content as a shadow. Typically you would use this attribute on a
copy of a content that is absolutely positioned beneath the original
to create a blurred shadow of it.
Example (adds a blurred shadow to a piece of content): <div id="modified" style="position:absolute;
z-index:-1;
filter:progid:DXImageTransform.Microsoft.blur(pixelradius=5.0,
makeShadow=true, ShadowOpacity=0.5)"> Demo:  This is my cat. This is my cat |
