Creating a Fade-in image slideshow using the "Fade" filter (IE)
In this tutorial I'll show you how to create an image
slideshow with an interesting fade-in effect for IE users (IE5.5+ to be
exact). It relies on IE's multimedia filters, a quick and easy way to add
interesting visual effects to content on your page. Here's what we'll see
how to do:
You need IE5.5+ to see the transitional effect, though the slideshow
itself works in all browsers. Lets begin shall we?
 The
Fade filter
Multimedia filters are a IE exclusive feature that instantly adds
transitional effects to objects on your page that simply aren't possible
using scripting alone. Here we are specifically interested in one of the
filters called "Fade." Now, you may be familiar with a filter called
"BlendTrans", which was first introduced in IE4; that one is now deprecated in
favour
of "Fade" (IE5.5+) instead, which is more efficient and contains
subtle rendering differences. Like any filter "Fade" is defined using CSS
syntax, either inline or within an external CSS:
Inline Definition:
<img id="myimage" src="myimage.gif" style="filter:progid:DXImageTransform.Microsoft.Fade(Duration=3)" />
External CSS Definition:
<style type="text/css">
#myimage{
filter:progid:DXImageTransform.Microsoft.Fade(Duration=3)
}
</style>
Both of the above are identical. It's probably a good time now to mention
that Microsoft states that a filter can only be applied to objects on the
page with a layout; in other words, objects with a defined width and height.
This is important to know when you're applying filters to textual containers
such as a P or DIV. In these cases, you'll need to also define (using CSS) a
width for the element, and in many cases, a height as well, before the
filter will work.
Defining a filter on an object by itself produces no visible effect- the
image above when viewed in your browser remains unchanged. Filters remain
dormant until they are invoked and manipulated using scripting, and that's
what we'll learn next!
|
