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

Putting On Your Mask - 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
The "mask" filter does exactly what its name suggests - it turns all the transparent pixels within an object into a specific colour and simultaneously takes all the non-transparent pixels in the specified object and turns them transparent. Note, however, that for this filter to work, the specified object must have some transparent pixels - like a transparent GIF or a block of text.

The following example turns the transparent areas of the image "square.gif" red.
<html>
<head>
</head>
<body>
<img style="filter: mask(color=red)" src="square.gif" border="0">
</body>
</html>


Alternatively, if you'd like your image to appear in grayscale, you could simply use the "gray" filter to remove all colour information from the image.
<img style="filter: gray" src="square.gif" border="0">
You could even reverse the colours of the image with the "invert" filter - be warned that most images typically look much uglier after this!
<img style="filter: invert" src="square2.gif" border="0">
<<< insert image6.gif and image8.gif >>>
And the "chroma" filter comes in handy when you need to make specific colours within an object transparent. Images which are highly compressed or dithered, like JPEG images, typically show poor results with this filter. The code
<img src="square.gif" border="0" style="filter: chroma(color=red)">
would turn all instances of the colour red within the image transparent.
<<< insert image9.gif and image10.gif >>>
If you're looking for something a little more unusual, there's the "wave" filter, which performs a wave distortion across the object it's applied to. This works best with images, rather than text - take a look:
<html>
<head>
</head>
<body>
<img style="filter: wave(strength=9, freq=10)" src="face.gif" border="0">
</body>
</html>


The "strength" attribute of the filter controls the level of intensity of the distortion, while the "freq" attribute controls the number of "waves" that appear in the distorted image.

The "glow" filter allows you to make your object glow - take a look:
<img src="face.gif" border="0" style="filter: glow(color=red)">
There's also a new "emboss" filter, which allows you to display an object as a gray embossed texture. Take a look:
<html>
<head>
</head>
<body>
<div style="position: absolute; top:50; left:50; font-family: Arial;
font-size: 40pt; filter: progid:DXImageTransform.Microsoft.Emboss">
Who's The Em-boss?
</div>
</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: