Tips on Using Filters

• No filters work for:Java™ applets, IFRAME, the SELECT and OPTION form elements, P paragraph elements, Hn headings, and EM and STRONG logical text style elements.
• Changing filters dynamically: According to Microsoft, the preferred method of applying a filter dynamically is to write it first in the STYLE section with the attribute enabled=0. With your script you then change that to enabled=1, which will apply the filter. This is what was done for the text in the Blur example.

  In the Blur example an inline style for the image applies the default blur() filter but then the style includes "enabled=0", so the effect is not rendered after all. In the onClick, each attribute of the filter is set. This could also be done with a function.

  Another method is to use a script to apply the filter, then set the attributes, then play the filter.

  <SCRIPT language=javascript>
  object.filters.filtername.apply();
  object.filters.filtername.attribute=mysettingforthisattribute;
  object.filters.filtername.play();
  </SCRIPT>
• WIDTH/HEIGHT: Note that an image must have a wide enough transparent background in it to hold the filter effect or the edges will be chopped off.

  You may have to add blank transparent space to the original image to have room for effects outside the original.

  You may, on the other hand, WANT the edges chopped off. Just be aware of the way this works.

  For text, the containing SPAN or DIV tag, for example, must be given fixed width and/or height for a filter to take effect. This makes sense when you consider that the filters will add screen space to the tag. You must tell the computer how much space it has to work with or else the effect will not be applied to the text. Be sure to size your SPAN or other object large enough!

• Positioned elements: If the object to which you want to apply a filter is positioned but is within a non-positioned element, the filter will be ignored! So be careful that for filtered objects that have fixed position that you have fixed the position of any containing element, too. This one is sneaky!!
• Chaining filters: You can apply more than one filter at a time.
  In the Style section you can put something like:
  {filter:blur() flipv fliph glow()}
  Note that the various filters are separated by a space only.
• The Filter string:If you want to assign filters thru scripting, you can add filters to the filter string. The FlipH and FlipV page uses this technique on the buttons that apply these filters to the examples.

  Microsoft says in the Internet Client SDK: "Note- It is strongly recommended that CSS filters be accessed through the object model whenever possible, and the filter string be accessed only under special circumstances where object model functionality is not adequate. Even in the case of dynamically adding filters, it is recommended in most cases to actually add the filter in the initial filter attributes of the element's style sheet with enabled=0. When the script wants the filter to be displayed, it can then simply set that filter to enabled=1 and the filter will be displayed. "

Back to list of Filters