How to Apply a Transition on an Image

Article
09/04/2012

This topic documents a feature of Visual Filters and Transitions, which is deprecated as of Windows Internet Explorer 9.

Transitions are one of the most useful features Dynamic HTML (DHTML) brings to the Internet. With transitions, Web designers can implement fast and easy visual effects on their Web pages with simple HTML and very minimal script code. Transitions are particularly useful in slide show presentations to move from one slide to the next (also called interpage transitions in DHTML), or to progressively render a graphic image on a page for a more subtle effect. Filters and transitions were first introduced in Microsoft Internet Explorer 4.0. The syntax changed in Internet Explorer 5.5, and this article describes the new syntax. For more information about Internet Explorer 4.0 filters refer to the Downlevel Support and Internet Explorer 4.0 Filters article.

This article demonstrates how to implement a simple transition on an image. Although the sample uses a Blinds transition, the technique described applies to the all transitions. The applyTransition function described in the following example should be generic enough to implement any desired transition in your own application.

To better understand transitions in Internet Explorer, see Introduction to Filters and Transitions.

The following steps outline how to apply a transition on an image:

Define the image, specifying the desired transition.

The Blinds transition filter is applied inline to the img control through the Cascading Style Sheets (CSS) -ms-filter attribute. In the code below, the value specified for the direction property is up, with the bands property set to 2 and transition play time takes three seconds.

In addition, two attributes must be specified in preparation for Step 2:
- The ID attribute needs to be set to refer to this image element in script.
- The CSS visibility attribute needs to be set to hidden initially, so the image transitions from being invisible to visible.
```
<IMG ID="MyImg" src="images/pdc97.jpg"  STYLE="filter:progid:DXImageTransform.Microsoft.Blinds(direction='down', bands=2);
  visibility:hidden" />
```
While this article demonstrates how to apply transitions on images, it's important to mention that transitions are not limited only to images. They can be applied to text as well. When applying transitions to text, usually a div or a span block is defined so that the -ms-filter attribute can be specified inline. When using div or span with transitions, be sure to specify one of height, width, or position:absolute or the filter will not be recognized as an object, resulting in a scripting error.

The following code example illustrates all necessary attributes to specify in a span object to successfully apply a transition on a text block.
```
<SPAN id=MyText style="width:250; 
    visibility:hidden;  filter:progid:DXImageTransform.Microsoft.Blinds(direction='down', bands=1)">
        It is quite easy to add visual flair to a page by using transitions. 
        First, set the revealTrans filter on the style sheet for the object
            being transitioned.
        Next, use the apply method to stop changes from being drawn.
        Now, change whatever things you want to change.
        Finally, use the play method to transition to those changes.

</SPAN>
```
Write a function to start the transition.

Causing the transition to take effect is a three-step process:
- First, apply the transition, without causing an immediate repaint, by using the apply method.
- Second, make the necessary changes.
  
  In the sample below, the image transitions from being invisible to visible, so the visibility property of the img object is set to visible. This is not always the case, however. In other instances, the image transitions into another image, thus the src property of the img object is set to the URL of the new image to be transitioned to.
- Third, complete the transition by using the play method.
  
  Note how the filter attribute defined for the img object in Step 1 is accessed through script by using the filters collection of the img object (in this case, MyImg). The filters collection returns all the filters defined for that element. Therefore, to access the first and only filter defined in the sample, use the following syntax (where 0 is the zero-based index):
```
MyImg.filters(0)]
```
These three steps have been encapsulated into the applyTransition function that takes the image object to be transitioned as a parameter.
```
<SCRIPT>
function applyTransition (oImg)
{
    oImg.filters(0).Apply();
    oImg.style.visibility = "visible";
    oImg.filters(0).Play();
}
</SCRIPT>
```
Finally, call the function.

This particular sample starts the transition as soon as the page loads, and thus calls the applyTransition function on its onload event. Note how the pointer to the object MyImg is passed to the function—with no quotation marks. Incorrectly enclosing it in quotation marks, as in "MyImg", results in the string "MyImg" being passed instead of the MyImg object. Therefore, no transition takes place.

A page that uses transitions for an animated sequence, for instance, would call the applyTransition function on a timer event or on a mouse event, depending on how the animation is implemented.
```
<BODY onload="applyTransition(MyImg)" ... >
    :
    :
</BODY>
```
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/howto/applyingTransitionEX.htm

How to Apply a Transition on an Image

Related Topics

Additional resources