미리 정의된 기능에 의하여 원래 이미지와 새로운 이미지의 논리적 색상 조합으로 개체의 새로운 내용을 표현한다.

Script object.style.filter='progid:DXImageTransform.Microsoft.(propVal)'
HTML <ELEMENT style="filter:progid:DXImageTransform.Microsoft.(propVal)">
인수
propVal : (속성 문자열)
필터가 가질 수 있는 한개 이상의 속성들로 속성=값들을 컴마(,)로 연결, 구성된 문자열이다.

애트리뷰트 속성 설명
function Function 수행할 기능함수를 사전에 정의된 번호로 반환하거나 설정한다.

메서드 status 설명
apply 1 변환을 위해 원본 개체의 내용을 캡쳐(capture)한다.
play 2 변환하며 디스플레이 한다.
특기

이 필터는 입력 개체의 내용의 색상이나 투명성등에 작용하여 풍부한 이미지 작성 기능을 제공한다.
생성하는 과정은 다음과 같다.

  1. 기능 번호를 선택한다.
    Function 속성에 기술된 사용 가능한 번호를 선택하여, 원하는 개체의 Compositor에 설정한다.
  2. 입력필드 Input A를 생성한다.
    먼저 표시될 필터된 개체의 내용을 결정한다. Compositor 기능들은 이를 Input A로 간주한다.
  3. apply 메서드를 Compositor 필터에 적용한다.
    apply 메서드를 호출할 때, 이를 내용을 Input A로 설정한다.
  4. 입력필드 Input B를 생성한다.
    개체의 visibility, innerText, backgroundColor, border등 속성이나 그 자식 엘레멘트의 속성들을 변경한다. Compositor 기능은 내용의 모든 변경을 적용하여 Input B에 표시한다.
  5. play 메서드를 사용하여Compositor 필터를 작동시킨다.
    Compositor 기능에 의해 변형된 이미지 내용이 표현된다.
적용style
A, ACRONYM, ADDRESS, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, FRAMESET, hn, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, KBD, LABEL, LEGEND, LI, MARQUEE, MENU, NOBR, OL, OBJECT, P, plainText, PRE, Q, RT, RUBY, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TD, TEXTAREA, TH, TT, U, UL, VAR, XMP

DIV에서 필터 속성 예제

문자열 A
문자열 A 속의 투명 부분 데이터
문자열 A 속의 배경 부분 데이터
Compositor Function 목록:
필터 표시창
</HEAD>
<SCRIPT>
function doPlay(){
  inA.filters.item(0).Apply();
  inA.innerHTML=inB.innerHTML;
  inA.filters.item(0).Play();
}
function showit(job){
  inA.filters.item('DXImageTransform.Microsoft.Compositor').Function=job;
  show.innerHTML=inA.style.filter+'<BR>'+selObj.options[selObj.selectedIndex].text;
}
</SCRIPT>
<STYLE>
.comBox{position:absolute;left:120;height:360;width:550;background:eee;border:solid 1 silver;padding:2;}
.font {font-size:13pt;font-weight:bold;padding:3;padding-top:5}

.Aclass{position:absolute;top:0;left:50;width:400;height:250;border:3 solid blue;}
.A1class{position:absolute;top:3;left:3;width:98%;height:30;background:blue;color:white;}
.A2class{position:absolute;top:32;left:50;width:300;height:100;;color:navy;padding:5;border:2 dotted blue;}
.A3class{position:absolute;top:132;left:50;width:300;height:100;background:blue;color:aqua;border:2 dotted black;}

.Bclass{position:absolute;top:80;left:0;width:100%;height:160;border:3 solid red;}
.B1class{position:absolute;top:3;left:3;height:30;width:100%;background:brown;color:white;border:dotted 1 white}
.B2class{position:absolute;top:32;left:3;height:60;width:100%;text-align:center;color:red;border:dotted 1 red}
.B3class{position:absolute;top:100;left:3;width:100%;height:50;text-align:center;background:brown;color:white;border:dotted 1 black}
</STYLE>
</HEAD>

<BODY onload=doPlay()>
<DIV id="divObj" class="comBox">
<DIV id="inA" class="Aclass" style="filter:progid:DXImageTransform.Microsoft.Compositor(function=20,duration=7);">
<DIV class="A1class font">문자열 A</DIV>
<DIV class="A2class font">문자열 A 속의 투명 부분 데이터</DIV>
<DIV class="A3class font">문자열 A 속의 배경 부분 데이터</DIV>
</DIV>

<DIV id="inB" style="display:none">
<DIV class="Bclass font">
<DIV class="B1class font">문자열 B</DIV>
<DIV class="B2class font">문자열 B 속의 투명 부분 데이터</DIV>
<DIV class="B3class font">문자열 B 속의 배경 부분 데이터</DIV>
</DIV>
</DIV>

<DIV style=height:260></DIV>

<B>Compositor Function 목록:</B>
<SELECT id=selObj onchange="showit(this.options(selectedIndex).value)">
 <OPTION value=0>0: 문자열 A, B 지움.</OPTION>
 <OPTION value=1>1: 양 문자열을 최소 색상으로 표시.</OPTION>
 <OPTION value=2>2: 양 문자열을 최대 색상으로 표시.</OPTION>
 <OPTION value=3>3: 문자열 A 만 표시.</OPTION>
 <OPTION value=4>4: 문자열 B 위에 문자열 A 표시.</OPTION>
 <OPTION value=5>5: 문자열 B 속에 문자열 A 만 표시.</OPTION>
 <OPTION value=6>6: 문자열 B 지역 밖의 문자열 A 만 표시.</OPTION>
 <OPTION value=7>7: 문자열 B 지역 속의 문자열 A 만 표시.</OPTION>
 <OPTION value=8>8: 문자열 A에서 문자열 B 빼고 표시.</OPTION>
 <OPTION value=9>9: 문자열 A에 문자열 B를 더해 표시.</OPTION>
 <OPTION value=10>10: 문자열 A 와 문자열이 겹치는 부분 지우고 표시.</OPTION>
 <OPTION value=19>19: 문자열 B 만 표시.</OPTION>
 <OPTION value=20 selected>20: 문자열 A 위에 문자열 B 표시.</OPTION>
 <OPTION value=21>21: 문자열 A 지역 속의 문자열 B 만 표시.</OPTION>
 <OPTION value=22>22: 문자열 A 밖의 문자열 B 만 표시.</OPTION>
 <OPTION value=23>23: 문자열 A 속의 문자열 A와 문자열 B 만 표시.</OPTION>
 <OPTION value=24>24: 문자열 B에서 문자열 A 빼고 표시.</OPTION>
 <OPTION value=25>25: 문자열 B에 문자열 A를 더해 표시.</OPTION>
</SELECT>
<DIV id=show style="width:550;height:50;border:solid 1 blue;padding:3">필터 표시창</DIV>
</DIV>