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

Scripting Your Filters - 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
It's also possible to access all these filters via JavaScript through the special Javascript array called "filters". For example, if you had the following piece of HTML,

<img id="face" style="filter: wave(strength=0, freq=1)" src="face.gif"
border="0">
you could access the "wave" filter attached to the image in any of the following ways:
document.all.face.filters[0]
document.all.face.filters["wave"]
document.all.face.filters.wave
document.all.face.filters.item(0)
document.all.face.filters.item("wave")
It's also possible to retrieve and manipulate filter attributes through Javascript, as the following example will demonstrate:
<html>
<head>
<basefont face=Arial>
<script language="Javascript">
var dir;
function wave(dir)
{
if (dir == "+")
{
document.all.face.filter.item(0).strength += 10;
}
else if (dir == "-")
{
document.all.face.filters["wave"].strength -= 10;
}
}
</script>
</head>
<body>
<img id="face" style="filter: wave(strength=0, freq=1)" src="face.gif"
border="0">
<br>
<a href="javascript: wave('+');">Increase wave strength</a>
<br>
<a href="javascript: wave('-');">Decrease wave strength</a>
</body>
</html>


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: