Back to Scripts

Javascript, Motion Blur

Requires Internet Explorer 5.5 or later to work
The DIV is located below, before applying image filters the image object requires its layout to be set.
We do that by setting its height and width properties (done inside the style tag).
Having the layout defined can also be done by setting the position attribute to absolute.
Or the layout can be defined by setting the property CONTENTEDITABLE in the div.

Motion Blur. This can be applied to images and text
To dynamically update the attributes of the MotionBlur filter, it first needs to be defined in the style and then each property can be accessed and manipulated independently in realtime.

Div text

DHTML Source


<!-- This DIV is the target container for the image.  -->  
    <table><tr><td width=100 height=100>
      <div id="mydiv" style="width:80; height:80; filter:progid:DXImageTransform.Microsoft.motionblur(strength=5, Direction=45, Add=true);">
          <center>
          <img src='../images/BABY_doll.gif' STYLE="width=40; height=28;"><br>
          <font size=1>Div text</font>
          </center>
      </div>
    </td></tr></table>

    <br>
    <br>

<table>
<tr>
<td>
<!-- Buttons to manipulate the div.  -->
<button onclick="mydiv.filters.item('DXImageTransform.Microsoft.MotionBlur').Strength=0">MotionBlur strength=0</button><br>
<button onclick="mydiv.filters.item('DXImageTransform.Microsoft.MotionBlur').Strength=3">MotionBlur strength=3</button><br>
<button onclick="mydiv.filters.item('DXImageTransform.Microsoft.MotionBlur').Strength=15">MotionBlur strength=15</button><br>
<button onclick="mydiv.filters.item('DXImageTransform.Microsoft.MotionBlur').Strength=30">MotionBlur strength=30</button><br>
<button onclick="mydiv.filters.item('DXImageTransform.Microsoft.MotionBlur').Direction=0">MotionBlur direction=0</button><br>
<button onclick="mydiv.filters.item('DXImageTransform.Microsoft.MotionBlur').Direction=45">MotionBlur direction=45</button><br>
<button onclick="mydiv.filters.item('DXImageTransform.Microsoft.MotionBlur').Direction=90">MotionBlur direction=90</button><br>
</td>
</tr></table>

References:
MSDN - Motion Blur

About Privacy Policy Hosting by Web Hosting Canada

Except where otherwise noted, this site is licensed under a Creative Commons License