Filtering Out The Good Stuff - 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

The special effects available in Internet Explorer broadly fall into one of two categories.

"Filters" are basic image manipulation tools, similar to those found in image editing packages like Adobe Photoshop or CorelDRAW! They allow you to apply basic transformations to an image - alter the level of transparency, rotate or flip the image, alter colour information and the like.

"Transitions" are special effects which are activated as a user exits or enters a specific Web page, and can best be compared to the various transition effects familiar to users of presentation packages like Microsoft Powerpoint. Transition effects include image morphing, vertical or horizontal blinds, wipes and fades.

Filters can typically be applied to specific HTML constructs only - the most common is the IMG construct, although you can also use them with the BODY, DIV, SPAN, and TABLE constructs. In order to provide Web developers with a fair amount of flexibility, filters can be activated either via simple CSS declarations or through Javascript code.

Before I get into the meat of each filter, here's a simple example which demonstrates the "flipV" filter as applied to an image. Note the new CSS keyword "filter", used to specify the type of filter to be used.

<html>
<head>
</head>
<body>
<img src="face.gif" border="0" style="filter: flipV">
</body>
</html>

You could also flip text, as the following example demonstrates:

<html>
<head>
<style type="text/css">
div.flipped {position: absolute; top: 0; left: 50; font-family: Arial;
filter: flipV}
</style>
</head>
<body>
<div class="flipped">
Upside-down and lovin' every minute!
</div>
</body>
</html>

I'll also demonstrate how Javascript can be used to apply a filter to a specific object - but that's a little further down.

This article copyright Melonfire 2000. All rights reserved.

Next: A Little Transparency >>