You are here: Home > Scripts > Javascript Image Transitions, Stretch, Zigzag, Inset


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

Back to Scripts

Javascript Image Transitions 5: Stretch, ZigZag and Inset

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 Stretch:
duration the length of time a transistion takes to complete, format seconds.milliseconds (0.0000), a value of 0.5 is half a second
stretchStyle 'hide' stretch new content over original from left to right. 'push' stretches new content in and squeezes original out, left to right. 'spin' stretches new content over original from the center outward

Transition ZigZag:
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 Inset:
duration the length of time a transistion takes to complete, format seconds.milliseconds (0.0000), a value of 0.5 is half a second

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.Stretch(stretchstyle=hide)'; applyTransition(mydiv)">transition Stretch hide</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Stretch(stretchstyle=hide)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Stretch hide</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Stretch(stretchstyle=push)'; applyTransition(mydiv)">transition Stretch push</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Stretch(stretchstyle=push)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Stretch push</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin)'; applyTransition(mydiv)">transition Stretch spin</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Stretch spin</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.ZigZag'; applyTransition(mydiv)">transition ZigZag</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.ZigZag'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition ZigZag</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Inset'; applyTransition(mydiv)">transition Inset</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Inset'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Inset</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 - Stretch transition
MSDN - ZigZag transition
MSDN - Inset transition

About Privacy Policy Hosting by Web Hosting Canada

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