Home arrow DHTML arrow Page 9 - Filters And Transitions In IE5

Zig And Zag - DHTML

You may not know this, but Internet Explorer 4.x and above hasimage manipulation capabilities similar to those normally found only inimage editing programs like Adobe Photoshop. This article takes a look atIE5's image filters, and demonstrates how they can help you add specialeffects to your images and text on the fly.

TABLE OF CONTENTS:
  1. Filters And Transitions In IE5
  2. Filtering Out The Good Stuff
  3. A Little Transparency
  4. Shadow Boxing
  5. Putting On Your Mask
  6. Scripting Your Filters
  7. Into The Blender
  8. Revealing The Secret
  9. Zig And Zag
By: icarus, (c) Melonfire
Rating: starstarstarstarstar / 9
October 31, 2000

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
Internet Explorer 5.5 also comes with some new effects - Zigzag, Iris, Barn, Blinds, Wheel, Slide, Checkerboard et al. Here's an example of how you could implement one of these new effects.




<html>
<head>
<script language="JavaScript">
// function to perform transition
function playTransition()
{
// apply transition
document.all.object.filters[0].Apply();
// change image source
document.all.object.src="face.gif";
// play transition
document.all.object.filters[0].Play();
}
</script>
</head>
<body onLoad="playTransition()">
<img id=object style="filter:
progid:DXImageTransform.Microsoft.Wheel(duration=3)" src="square.gif">
</body>
</html>
To try out one of the other filters, simple replace the transition name above ("Wheel") with the name of the transition you'd like to try out ("Blinds" or "Slide"). Note that some of the new filters require additional attributes that control the direction or style in which the effect is applied.

In case you'd prefer to apply the transition to the entire page, you need to add appropriate code to the <META> tag within the <HEAD> of your HTML page. This code consists of the event to which the transition should be linked, the type of transition, and the duration, in seconds, of the transition.

Internet Explorer currently supports four types of events: Page-Enter, Page-Exit, Site-Enter and Site-Exit. Here's an example which demonstrates vertical blinds when entering a page:
<html>
<head>
<meta http-equiv="Page-Enter" content="revealTrans(duration=10,
transition=8)">
</head>
<body>
<center>
<h2>Welcome to my Web page</h2>
</center>
</body>
</html>
In this case, the effect will take place over a period of ten seconds, the duration again being capable of manipulation in the filter definition.

And that's just about it. See you soon!

This article copyright Melonfire 2000. All rights reserved.

 
 
>>> More DHTML Articles          >>> More By icarus, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

DHTML ARTICLES

- Google Gives Buckyball a Tribute Doodle in H...
- Rough Guide To The DOM (part 2)
- Rough Guide To The DOM (part 1)
- Filters And Transitions In IE5
- Understanding Embedded Fonts

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: