24개의 사전에 정의된 기능에 의하여 개체의 내용을 변환시켜 새로운 내용을 표현한다.

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

progid:DXImageTransform.Microsoft. 부분은 생략이 가능하나 속성과 효과가 다소 다를 수 있다.


애트리뷰트 속성 설명
duration Duration 변환이 완성되는 시간의 길이를 밀리초 단위로 반환하거나 설정한다.
enabled Enabled 필터가 작용할 수 있게 할 것인가를 반환하거나 설정한다. true: 사용가능, false:사용 불가능
  Percent 정지된 필터 출력을 캡쳐할 완성도 백분율 포인트를 반환하거나 설정한다.
  status 변환의 상태를 반환한다.
transition Transition 변환 종류를 반환하거나 설정한다.

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

아래 목록은 사전에 정의된 Transition 속성으로 사용할 수 있는 변환들이다. 그러나 최적화 필터를 사용하여 추가적인 선택과 강화된 기능으로 더 효과적인 변환을 얻을 수 있다.

변환(transition) 번호 최적화 필터
13, 14, 15, 16 Barn
8, 9 Blinds
10, 11 CheckerBoard
0, 1, 2, 3 Iris
21, 22 RandomBars
12 RevealTrans
4, 5, 6, 7 Slide
17, 18, 19, 20 Strips
적용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, 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, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, STYLE, SUB, SUP, TABLE, TD, TEXTAREA, TH, TT, U, UL, VAR, XMP

DIV에서 필터 속성 예제


RevealTrans 필터 예제
필터 표시창
<SCRIPT>
bgB='green';
function doPlay(){
  divObj.filters[0].Apply();
  bgA=divObj.style.backgroundColor;
  if (bgA=='green'){
    bgB=divObj.style.backgroundColor='pink';
    divObj.filters[0].Transition=2;
  } else {
    bgB=divObj.style.backgroundColor='green';
    divObj.filters[0].Transition=3;
  }
  divObj.filters[0].Play();
  str='divObj.style.filter='+divObj.style.filter+'<BR>';
  str+='⇒Enabled=('+divObj.filters[0].Enabled+'), ';
  str+='Transition=('+divObj.filters.item(0).Transition+'), ';
  str+='Duration=('+divObj.filters.item(0).Duration+'), ';
  str+='backgroundColor=('+bgA+'⇒'+bgB+')';
  show.innerHTML=str;
}
</SCRIPT>
<DIV id="divObj" style="height:200;width:600;font-size:40;line-height:1.2em;color:yellow;background-color:pink;padding:9;
  filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=2,transition=3);">
<IMG src=../../gif/rfexample.gif width=100><BR>
RevealTrans 필터 예제
</DIV>
<BUTTON onclick="doPlay()" style="width:600">필터 효과를 위해 클릭해 보라</BUTTON>
<DIV id=show style="width:600;height:50;border:solid 1 blue;padding:3;font-size:80%">필터 표시창</DIV>