You are here: Home > Scripts > Javascript Image Transitions, Wheel, blind, eye

What's
New

Doll
Makers

Room
Makers

Puzzle
Makers

Roiworld

Stardoll

Links

GirlSense - online dress up games for girls with fashion sense

Back to Scripts

Javascript Image Transitions 1: Wheel, Blind and Iris

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 Wheels:
duration the length of time a transistion takes to complete, format seconds.milliseconds (0.0000), a value of 0.5 is half a second
spokes the number of wedges the content is divided into

Transition Blinds:
duration the length of time a transistion takes to complete, format seconds.milliseconds (0.0000), a value of 0.5 is half a second
direction sets the direction of motion for the transition. Possible values: up, down, right, left
bands Number of strips the content is divided into

Transition Iris:
duration the length of time a transistion takes to complete, format seconds.milliseconds (0.0000), a value of 0.5 is half a second
irisStyle can be either square or circle
motion reveal from the outside (out) or inside first (in)

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.Wheel(spokes=8)'; applyTransition(mydiv)">transition Wheels</button></td>
    <td width=10></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Wheel(spokes=8)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Wheels</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Blinds(direction=down,bands=9)'; applyTransition(mydiv)">transition Blinds down</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Blinds(direction=down,bands=4)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Blinds down</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Blinds(direction=right,bands=4)'; applyTransition(mydiv)">transition Blinds right</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Blinds(direction=right,bands=4)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Blinds right</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out)'; applyTransition(mydiv)">transition Iris motion out</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Iris motion out</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=in)'; applyTransition(mydiv)">transition Iris motion in</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=in)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Iris motion in</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 - Wheel transition
MSDN - Blinds transition
MSDN - Iris transition

About Privacy Policy Hosting by Web Hosting Canada

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