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:

By: icarus, (c) Melonfire

Poor Best

Rating:

/ 9

October 31, 2000

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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>

Next: Into The Blender >>