More filter techniques

Revealing a filter change via a transition

You can use transitions to reveal changes in visual filter settings, just as you can use them to reveal any other changes in an object's visual properties.  The text above is contained in a DIV with a glow filter and a transition set, like this:

<div id="Glowing" onClick="togGlow()"
             style="width:100%;filter:glow(color=red) revealTrans(Duration=1.0, Transition=6)">

(remember, a DIV or SPAN must have a width and/or height style sheet entry in order to accept filters).

The DIV's onClick event calls a function which toggles the glow filter's .enabled property - but does it inside a 'sandwich' of .Apply() and .Play() transition method calls, like this:

function togGlow() {
if (Glowing.filters.revealTrans.status == 0) {
Glowing.filters.revealTrans.Apply()

if (Glowing.filters.glow.enabled) {
Glowing.innerHTML = "<h1>Click on this text to wipe its glow back on again</h1>"
} else {
Glowing.innerHTML = "<h1>Click on this text to wipe its glow off</h1>" }
Glowing.filters.glow.enabled = !Glowing.filters.glow.enabled

Glowing.filters.revealTrans.Play()
} }

The result is that the change in glow .enabled status is revealed via the transition. You can place any combination of visual property changes inside a transtion's .Apply() / .Play() method call sandwich - in this example I've changed the DIV's text content (its .innerHTML property) as well as its glow filter status.

Two (or more) filters of the same type on a single object

The text above is in a DIV ("Altshadows") with two shadow filters set, like this:

<div id="Altshadows"
             style="color=blue;width:100%;filter: shadow(color=gray, direction=135, enabled = 1) shadow(color=gray, direction = 225, enabled = 0)">

By toggling the .enabled properties of the two filters (in a function called repeatedly by setInterval()), the text's shadows alternate. Because the DIV has two filters called 'shadow', you can't use the syntax divname.filters.shadow.enabled to access their .enabled properties (the script wouldn't know which 'shadow' you were referring to). Instead you have to 'index the collection' of filters for the DIV, like this:

Altshadows.filters[0].enabled = !Altshadows.filters[0].enabled
Altshadows.filters[1].enabled = !Altshadows.filters[1].enabled

Filters (including transitions) are numbered from zero in the order in which they're declared in the HTML tag's inline style sheet. This is a potential pitfall, because if you added a filter to the middle or start of the style sheet's filters declaration, the script code would end up referencing the wrong filters. Be very careful when using this technique!