Help

CodingForums
Having trouble with scripting? Visit our help forum to get the answers you need.

Partners
This is a

Programming the MotionBlur filter

The MotionBlur filter comes with 3 scriptable properties:

direction  Controls the direction of the blur, with valid values 0 to 360, representing logically degrees.
strength  The strength of the blur. Valid values are 0 and up.
enabled  Toggles the blur effect on and off. Values are true/false.

These properties exist via the "filters" object of the applied element. For example:

<style type="text/css">
#test{
filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=30,Direction=90)
}
</style>

<img src="mouse.gif" id="test">

<script type="text/javascript">
test.filters[0] //accesses the first filter of the element, or MotionBlur
test.filters[0].strength=20 //sets strength of MotionBlur to 20
test.filters[0].enabled=false //turns off MotionBlur
</script>

We use "filters[0]" because the object is an array. And since only one filter- namely, MotionBlur- is defined, the index "0" is used to gain access to it.

-Example

Here's a simple example that dynamically changes the direction of MotionBlur as the images moves about horizontally:

<style type="text/css">
#test{
filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=20,Direction=270);
position:relative;
}
</style>

<img src="mouse.gif" id="test">

<script type="text/javascript">
var direction="right"

function leftrightmove(){
if (direction=="right"){
if (test.style.pixelLeft<200)
test.style.pixelLeft+=5
else{
direction="left"
test.filters[0].direction=90
}
}
else if (direction=="left"){
if (test.style.pixelLeft>0)
test.style.pixelLeft-=5
else{
direction="right"
test.filters[0].direction=270
}
}
}

if (document.all&&window.createPopup) //if IE5.5+
setInterval("leftrightmove()",20)
</script>