You are here: Home > Scripts > Javascript Image Transitions, Spiral, Pixelate, Wipe


	What's New	Doll Makers	Room Makers	Puzzle Makers	Roiworld	Stardoll	Smilies	Links

Back to Scripts

Javascript Image Transitions 4: Spiral, Pixelate and RadialWipe

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 Spiral:
duration the length of time a transistion takes to complete, format seconds.milliseconds (0.0000), a value of 0.5 is half a second
gridSizeX the number of grid columns
gridSizeY the number of grid rows

Transition Pixelate:
duration the length of time a transistion takes to complete, format seconds.milliseconds (0.0000), a value of 0.5 is half a second
maxSquare the maximum size in pixels of a pixelated square

Transition RadialWipe:
duration the length of time a transistion takes to complete, format seconds.milliseconds (0.0000), a value of 0.5 is half a second
wipeStyle 'clock', sweep clockwise starting from 12 noon. 'wedge' Sweep from BOTH directions starting from 12 noon. 'radial' Sweep top to bottom with the center radial in the top left corner.

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.Spiral(gridsizex=8, gridsizey=8)'; applyTransition(mydiv)">transition Spiral</button>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Spiral(gridsizex=8, gridsizey=8)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Spiral</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Pixelate'; applyTransition(mydiv)">transition Pixelate</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Pixelate'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Pixelate</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=clock)'; applyTransition(mydiv)">transition RadialWipe clock</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=clock)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition RadialWipe clock</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=wedge)'; applyTransition(mydiv)">transition RadialWipe wedge</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=wedge)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition RadialWipe wedge</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=radial)'; applyTransition(mydiv)">transition RadialWipe radial</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=radial)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition RadialWipe radial</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 - Spiral transition
MSDN - Pixelate transition
MSDN - RadialWipe transition

About Privacy Policy Hosting by Web Hosting Canada

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