You are here: Home > Scripts > Javascript Image Transitions, Checkerboard, Random, Fade

What's
New

Doll
Makers

Room
Makers

Puzzle
Makers

Dress Up
Games

Back to Scripts

Javascript Image Transitions 3: Checkerboard, RandomDissolve and Fade

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.

Transition Checkerboard:
direction sets the direction of motion for the transition. Possible values: up, down, right, left
squaresX the number of columns for the checkerboard transition
squaresY the number of rows for the checkerboard transition

Transition RandomDissolve:
duration the length of time a transistion takes to complete, format seconds.milliseconds (0.0000), a value of 0.5 is half a second

Transition Fade:
duration the length of time a transistion takes to complete, format seconds.milliseconds (0.0000), a value of 0.5 is half a second
overlap the fraction of the transition both original and new content. (from 0.0 to 1.0)

To execute ANY transistions on an image, div, span or body you need to follow 3 steps

set object filter to 'Apply()'
set new image, visibilty, color
set object filter to 'Play()'

Div text
applied to DIV	applied to IMG

DHTML Source


<SCRIPT>
function applyTransition (obj)
{
    obj.filters(0).Apply();
    obj.style.visibility = "visible";
    obj.filters(0).Play();
}
function applyImageTransition (obj, imgsrc)
{
    obj.filters(0).Apply();
    obj.src=imgsrc;
    obj.filters(0).Play();
}
</SCRIPT>

<!-- This DIV is the target container for the image.  -->  
    <table><tr><td width=250 height=100>
      <div id="mydiv" style="width:250; height:120; visibility:hidden; background-color:#DDDDDD">
          <center>
          <img src='../images/BABY_doll.gif' STYLE="width=40; height=28;"><br>
          <img src='../images/DOG_room.gif' STYLE="width=40; height=28;"><br>
          <img src='../images/CANDY_doll.gif' STYLE="width=40; height=28;"><br>
          <font size=1>Div text</font>
          </center>
      </div>
    </td><td width=250 height=100 align=center valign=center>
      <img id="myimg" src='../images/CANDY_doll.gif' STYLE="width=40; height=28;">
    </td></tr>
    <tr><td align=center><font size=1 face=arial>applied to DIV</td>
    <td align=center><font size=1 face=arial>applied to IMG</td></tr></table>
    <br>
    <br>
<!-- Buttons to manipulate the div and image.  -->
<table>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Checkerboard(direction=right)'; applyTransition(mydiv)">transition Checkerboard right</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Checkerboard(direction=right)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Checkerboard right</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Checkerboard(direction=down, squaresX=25, squaresY=12)'; applyTransition(mydiv)">transition Checkerboard down</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Checkerboard(direction=down, squaresX=25, squaresY=12)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Checkerboard down</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.RandomDissolve'; applyTransition(mydiv)">transition RandomDissolve</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.RandomDissolve'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition RandomDissolve</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Fade(overlap=0.7)'; applyTransition(mydiv)">transition Fade</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Fade(overlap=0.7)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Fade</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.visibility='hidden';">Reset</button></td>
    <td></td>
    <td><button onclick="myimg.src='../images/CANDY_doll.gif';">Reset</button></td>
  </tr>
</table>

References:
MSDN - Checkerboard transition
MSDN - RandomDissolve transition
MSDN - Fade transition

About Privacy Policy Hosting by Web Hosting Canada

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