개체의 내용을 안에서부터 밖으로 혹은 밖에서부터 안으로 열리면서 변환하여 새 내용으로 변환한다.

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

progid:DXImageTransform.Microsoft. 부분은 생략이 불가능하다.


애트리뷰트 속성 설명
duration Duration 변환이 완성되는 시간의 길이를 밀리초 단위로 반환하거나 설정한다.
enabled Enabled 필터가 작용할 수 있게 할 것인가를 반환하거나 설정한다. true: 사용가능, false:사용 불가능
irisStyle IrisStyle 개체 내용의 변환하는 모양을 반환하거나 설정한다.
motion Motion 개체의 내용의 변환을 안에서 밖으로하는가, 밖에서 안으로 하는가를 반환하거나 설정한다.
  Percent 정지된 필터 출력을 캡쳐할 완성도 백분율 포인트를 반환하거나 설정한다.
  status 변환의 상태를 반환한다.

메서드 status 설명
apply 1 변환을 위해 원본 개체의 내용을 캡쳐(capture)한다.
play 2 변환하며 디스플레이 한다.
stop 0 변환의 반복을 중지한다.
특기
적용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에서 필터 속성 예제


Iris 필터 예제

필터 표시창
<SCRIPT>
var aTypes=new Array('plus','diamond','circle','cross','square','star');
var aColors=new Array('green','pink','red','yellow','aqua','blue','brown','teal');
var Sidx=Bidx=Fidx=0;
bgB='pink';

function doPlay(job){
  bgA=divObj.style.backgroundColor=aColors[Bidx%aColors.length];
  if (!job) divObj.filters[0].Enabled=false;
  else {
    if (job==1){
    } else if (job==2){
      divObj.filters[0].irisstyle=aTypes[(++Sidx)%aTypes.length];
    } else if (job==3){
      divObj.filters[0].Duration++;
    } else if (job==4){
      if (divObj.filters[0].Duration) divObj.filters[0].Duration--;
    } else if (job==5){
      divObj.filters[0].Motion='in';
    } else if (job==6){
      divObj.filters[0].Motion='out';
    } else if (job==7){
      divObj.style.color=aColors[(++Fidx)%aColors.length];
    } else if (job==8){
      bgA=aColors[(++Bidx)%aColors.length];
      bgB=aColors[(Bidx+1)%aColors.length];
    }
    divObj.style.backgroundColor=bgA;
    divObj.filters[0].Enabled=true;
    divObj.filters[0].Apply();
    divObj.style.backgroundColor=bgB;
    divObj.filters[0].Play();
  }
  str='';
  str+='filter='+divObj.style.filter+'<BR>';
  str+='⇒ Enabled=('+divObj.filters[0].Enabled+'), ';
  str+='IrisStyle=('+divObj.filters[0].IrisStyle+'), ';
  str+='Duration=('+divObj.filters[0].Duration+') ';
  str+='Motion=('+divObj.filters[0].Motion+')<BR>';
  str+='background=('+bgA+')⇒('+bgB+'), color=('+divObj.style.color+')';
  show.innerHTML=str;
}
</SCRIPT>

<DIV id="divObj"
  style="height:300;width:550;background-color:pink;font-size:30;line-height:1.2em;font-weight:bold;color:blue;padding:9;
  filter:progid:DXImageTransform.Microsoft.Iris(IrisStyle=plus,duration=3);">
<IMG src=../../gif/rfexample.gif width=100><BR>
Iris 필터 예제
</DIV>
<BUTTON onclick="doPlay(0)" style="width:110">정상 이미지</BUTTON>
<BUTTON onclick="doPlay(1)" style="width:110">Iris 필터 효과</BUTTON>
<BUTTON onclick="doPlay(2)" style="width:110">스타일 변경</BUTTON>
<BUTTON onclick="doPlay(3)" style="width:110">Duration++</BUTTON>
<BUTTON onclick="doPlay(4)" style="width:110">Duration--</BUTTON><BR>
<BUTTON disabled style="width:110"></BUTTON>
<BUTTON onclick="doPlay(5)" style="width:110">안으로</BUTTON>
<BUTTON onclick="doPlay(6)" style="width:110">밖으로</BUTTON>
<BUTTON onclick="doPlay(7)" style="width:110">글자색 변경</BUTTON>
<BUTTON onclick="doPlay(8)" style="width:110">배경색 변경</BUTTON>
<DIV id=show style="width:550;height:70;border:solid 1 blue;padding:3">필터 표시창</DIV>
</DIV>