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

Revealing The Secret - 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
Next on the list is the reveal transition, which allows you to add any one of 23 pre-defined page effects to your page. Usage is almost identical to the example above; however, note the addition of a new attribute named "transitions", which must be provided with a numeric value corresponding to the transition to be applied.

<html>
<head>
<script language="JavaScript">
// function to perform transition
function playTransition()
{
// apply transition
document.all.object.filters.revealTrans.Apply();
// change image source
document.all.object.src = "face.gif";
// play transition
document.all.object.filters.revealTrans.Play();
}
</script>
</head>
<body onLoad="playTransition()">
<img id=object style="filter:revealTrans(duration=3, transition=2)"
src="square.gif" border="0">
</body>
</html>
This would create a "circle in" effect on the specified image.

Available transitions, with their numeric codes, are as follows:
Numeric Code Effect
--------------------------------
0 Box in
1 Box out
2 Circle in
3 Circle out
4 Wipe up
5 Wipe down
6 Wipe right
7 Wipe left
8 Vertical blinds
9 Horizontal blinds
10 Checkerboard across
11 Checkerboard down
12 Random dissolve
13 Split vertical in
14 Split vertical out
15 Split horizontal in
16 Split horizontal out
17 Strips left down
18 Strips left up
19 Strips right down
20 Strips right up
21 Random bars horizontal
22 Random bars vertical
23 Random filter from list above


This article copyright Melonfire 2000. All rights reserved.

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

blog comments powered by Disqus
   

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

 



© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap

Dev Shed Tutorial Topics: