filter - Compositor() (Filter/visual)

As content is added to an object, it can be colored to indicate that it is changed content.

Availability:

JScript - 5.5
Internet Explorer - 5.5
Object properties:Enabled, Function
Object methods:apply(), play()
Supported by objects:A, ACRONYM, ADDRESS, B, BDO, BIG BLOCKQUOTE, body, BUTTON, CAPTION, CENTER, CITE, CODE, custom, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, FRAMESET, Hn, I, IFRAME, IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, MARQUEE, MENU, NOBR, OL, P, PLAINTEXT, PRE, Q, RT, RUBY, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TD, TEXTAREA, TH, TT, U, UL, VAR, XMP

Although this is implemented as a transitional effect, it actually only affects the display of an HTML Element in a static manner.

The Function property provides a way to select a rule for displaying a pixel color based on the two corresponding pixels in the previous and new image content of the HTML element being filtered.

The actual function is selected by a numeric value as follows (as described by the MSDN scripting reference information):

CodeOperationDescription
0CLEARNeither pixel value displayed.
1MIN(A, B)Show the less bright of the two pixels.
2MAX(A, B)Show the brighter of the two pixels.
3AInput A shown, Input B ignored.
4A OVER BInput A displayed over Input B. All of Input A is visible, and Input B shows through translucent regions of Input A .
5A IN BDisplay all parts of Input A that are contained in Input B. Only regions with nonzero alpha values for both images are visible, and no part of Input B shows through.
6A OUT BDisplay all parts of Input A that are not contained in Input B. No part of Input B is displayed.
7A ATOP BDisplay Input A covering Input B, with each sample scaled by the alpha channel of Input B.
8A SUBTRACT BDisplay Input A with the sample color values of Input B subtracted from the corresponding sample color values of Input A . The resulting color is scaled by the alpha values of Input A .
9A ADD BDisplay Input A with the sample color values of Input B added to the corresponding sample color values of Input A . The resulting color value is scaled by the alpha value of Input A .
10A XOR BDisplay pixels of each set of input where the two images do not overlap. Pixels that overlap are scaled by their inverse alpha value.
19BInput B shown, Input A ignored.
20B OVER AInput B displayed over Input A . All of Input B is visible, and Input A shows through translucent regions of Input B.
21B IN ADisplay all parts of Input B that are contained in Input A . Only regions with nonzero alpha values for both images are visible, and no part of Input A shows through.
22B OUT ADisplay all parts of Input B that are not contained in Input A . No part of Input A is displayed.
23B ATOP ADisplay Input B over Input A , with each sample scaled by the alpha channel of Input A .
24B SUBTRACT ADisplay Input B with the sample color values of Input A subtracted from the corresponding sample color values of Input B. The resulting color is scaled by the alpha values of Input B.
25B ADD ADisplay Input B with the sample color values of Input A added to the corresponding sample color values of Input B. The resulting color value is scaled by the alpha value of Input B.

The apply() method should be executed on the filter object to capture the initial (state A) image pixel map. Then the play() method can be applied after some changes have taken place. At this point the state B image can be determined and compared with the state A image.

Example code:

   <HTML>
   <HEAD>
   </HEAD>
   <BODY bgcolor=gray onload="loader()">
   <BUTTON onClick="filterThing()">Click me</BUTTON>
   <BR>
   <DIV ID="CONTAINER" STYLE="filter:progid:DXImageTransform.Microsoft.Compositor(function=20); position:absolute; height:300; width:300">
   <IMG SRC="./Logo150.gif" STYLE="position:absolute; left:50; top:50;">
   </DIV>
   <SCRIPT>
   function loader()
   {
      CONTAINER.filters.item(0).Apply();
      CONTAINER.innerHTML = HIDDEN.innerHTML;
      CONTAINER.filters.item(0).Play();
   }
   function filterThing()
   {
      CONTAINER.filters.item('DXImageTransform.Microsoft.Compositor').Function = 2;
   }
   </SCRIPT>
   <DIV ID="HIDDEN" STYLE="display:none">
   <IMG SRC="./Logo150.gif" STYLE="position:absolute; left:50; top:50;">
   <IMG SRC="./Logo150.gif" STYLE="position:absolute; left:70; top:70;">
   </DIV>
   </BODY>
   </HTML>

See also:Filter object, style.filter

PropertyJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
Enabled n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
Function n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-

MethodJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
apply() n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
play() n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-