You are here: Home > Scripts > Javascript Image Transitions, Strips, Bars

What's
New

Doll
Makers

Room
Makers

Puzzle
Makers

Dress Up
Games

Back to Scripts

Javascript Image Transitions 2: Strips, RandomBars and Barn

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 Strips:
duration the length of time a transistion takes to complete, format seconds.milliseconds (0.0000), a value of 0.5 is half a second
motion the corner from which the new content is revealed, 'leftdown', 'leftup', 'rightdown', 'rightup'

Transition RandomBars:
duration the length of time a transistion takes to complete, format seconds.milliseconds (0.0000), a value of 0.5 is half a second
orientation indicates whether the filter effect is 'horizontal' or 'vertical'

Transition Barn:
duration the length of time a transistion takes to complete, format seconds.milliseconds (0.0000), a value of 0.5 is half a second
motion reveal from the outside (out) or inside first (in)
orientation indicates whether the filter effect is 'horizontal' or 'vertical'

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></table>
    <br>
    <br>
<!-- Buttons to manipulate the div and image.  -->
<table>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Strips(motion=leftdown)'; applyTransition(mydiv)">transition Strips leftdown</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Strips(motion=leftdown)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Strips leftdown</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Strips(motion=rightup)'; applyTransition(mydiv)">transition Strips rightup</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Strips(motion=rightup)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Strips rightup</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.RandomBars(orientation=horizontal)'; applyTransition(mydiv)">transition RandomBars horizontal</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.RandomBars(orientation=horizontal)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition RandomBars horizontal</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical)'; applyTransition(mydiv)">transition RandomBars vertical</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition RandomBars vertical</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Barn(orientation=vertical,motion=out)'; applyTransition(mydiv)">transition Barn</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Barn(orientation=vertical,motion=out)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Barn</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 - Strips transition
MSDN - RandomBars transition
MSDN - Barn transition

About Privacy Policy Hosting by Web Hosting Canada

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