Programming the MotionBlur filter

The MotionBlur filter comes with 3 scriptable properties:

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" style="left:0; position:relative">

<script>
var direction="right"
var targetel=document.getElementById("test")

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


setInterval("leftrightmove()",20)
</script>

• Tutorial Introduction
• Programming the MotionBlur filter