filter - Compositor()

	JavaScript Programmer's Reference
Prev	Home	Up		Next

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):

Code	Operation	Description
`0`	`CLEAR`	Neither pixel value displayed.
1	`MIN(A, B)`	Show the less bright of the two pixels.
`2`	`MAX(A, B)`	Show the brighter of the two pixels.
`3`	`A`	`Input A` shown, `Input B` ignored.
`4`	`A OVER B`	`Input A` displayed over `Input B`. All of `Input A` is visible, and `Input B` shows through translucent regions of `Input A` .
`5`	`A IN B`	Display 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.
`6`	`A OUT B`	Display all parts of `Input A` that are not contained in `Input B`. No part of `Input B` is displayed.
`7`	`A ATOP B`	Display `Input A` covering `Input B`, with each sample scaled by the alpha channel of `Input B`.
`8`	`A SUBTRACT B`	Display `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` .
`9`	`A ADD B`	Display `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` .
`10`	`A XOR B`	Display pixels of each set of input where the two images do not overlap. Pixels that overlap are scaled by their inverse alpha value.
`19`	`B`	`Input B` shown, `Input A` ignored.
`20`	`B OVER A`	`Input B` displayed over `Input A` . All of `Input B` is visible, and `Input A` shows through translucent regions of `Input B`.
`21`	`B IN A`	Display 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.
`22`	`B OUT A`	Display all parts of `Input B` that are not contained in `Input A` . No part of `Input A` is displayed.
`23`	`B ATOP A`	Display `Input B` over `Input A` , with each sample scaled by the alpha channel of `Input A` .
`24`	`B SUBTRACT A`	Display `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`.
`25`	`B ADD A`	Display `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>

Property	JavaScript	JScript	N	IE	Opera	NES	ECMA	DOM	CSS	HTML	Notes
`Enabled`		5.5		5.5							-
`Function`		5.5		5.5							-

Prev	Home	Next
filter - Chroma()	Up	filter - DropShadow()
JavaScript Programmer's Reference, Cliff Wootton Wrox Press (www.wrox.com) Join the Wrox JavaScript forum at p2p.wrox.com Please report problems to support@wrox.com © 2001 Wrox Press. All Rights Reserved. Terms and conditions.

JavaScriptProgrammer'sReference

filter - Compositor() (Filter/visual)

Example code:

JavaScript
Programmer's
Reference