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

Into The Blender - 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
In addition to all these filters, Internet Explorer also comes with in-built capabilities for transition effects as you move from page to page within a site. These transitions are nothing but very powerful filters, which allow you to morph one image into another, or display pre-defined effects when specific events occur.

Currently, Internet Explorer supports a bunch of different transitions. The first of these is the blend transition, which is demonstrated in the following example:
<html>
<head>
<script language="JavaScript">
// function to perform transition
function playTransition()
{
// apply transition
document.all.object.filters.blendTrans.Apply();
// change image source
document.all.object.src = "face.gif";
// play transition
document.all.object.filters.blendTrans.Play();
}
</script>
</head>
<body onLoad="playTransition()">
<img id=object style="filter:blendTrans(duration=3)" src="square.gif"
border="0">
</body>
</html>
In this case, the square block will slowly morph into a face, the entire transition taking place over three seconds. You can alter the duration with the "duration" attribute of the "blendTrans" filter.

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: