(Transparent GIF)

There's text hidden under this image!

Text

How this page works

Visual filters can be applied to an object in any combination, although some combinations work better than others. Similarly, some filters work best on images, others on text. You can select any filter combination you like using the check boxes above - try them and see the effects.

To create a filter for an object, add a filter string to its HTML tag's inline style sheet, like this:

<DIV ID="MyDiv" STYLE="filter: fliph shadow(color=gray, direction=135);">

The filter string contains as many filter type defintions as you want, some of which may include parameters. To build a string for a combination, create it on this page, then select and copy the filter string that's displayed below the check boxes.

Filters can be applied to some individual object type, such as IMG and INPUT tags, or to containers such as DIVs, SPANs and TABLEs (note - DIVs and SPANs should have a width, height or position property set if you want to apply filters to them). Filters can't be applied to formatting tags such as <h2>, <bold> etc., even though they act like containers in other ways.

When a filter is applied to a container, all the objects inside it are filtered - in this page, the two images and 'Text' string are all held inside a single DIV, which has filters set in its inline style sheet. To apply filter effects to text, you have to place the text inside a container, and give the container a filter.

The filter types which have been applied to an object form a 'filters collection', and you can access individual types within the collection in order to read and set their properties. In the style sheet example above, the DIV object has a fliph (flip horizontal) and a shadow filter set. To change the shadow filter's color property, you could say:

MyDiv.filters.Shadow.color = "blue"

or

MyDiv.filters[1].color="blue"

the second method uses a numeric value as an index to the collection (very much like an array index) - 'MyDiv.filters[1]' means 'the second filter for this object' (collection indexes start from zero). This happens to be the Shadow filter, because it was defined after the fliph filter in the filter string.

Indexing filter collections isn't a good idea when you want to access a specific filter type, because it's so easy to get your script code out of sync with the order in which types appear in an object's collection (better to simply say 'MyDiv.filters.shadow' etc). However indexing is handy when you want to access all the filter types applied to an object.

One instance when you might want to do this is when switching filters on and off. Each filter type has an .enabled property, with possible values of false (zero) or true (non-zero). When 'enabled' is false, the filter type isn't applied to the object. By setting enabled = false for all of an object's filter types, you can revert it to plain display - set them back to true and the object will appear in filtered mode again.

You could do this by working through the known filter types for the object, like this:

MyDiv.filters.fliph.enabled = false
MyDiv.filters.shadow.enabled = false

But it's much more flexible, and less error-prone, to do it like this:

for (i=0; i < MyDiv.filters.length; i++) {
MyDiv.filters[i].enabled = false }

This routine will clear all filters for the object, however many there are, so if you add or remove filter types you won't need to change the code.

This page works by selectively enabling/disabling filter types, and also has a 'clear all filters' loop which switches everything off whenthe page is first displayed. View the page source (which contains detailed comments) to see how it's done.