개체의 원본 내용을 서양 장기판처럼 작은 사각형으로 잘라 점진적으로 변화시켜 새로운 내용으로 표현한다.
| Script | object.style.filter='progid:DXImageTransform.Microsoft.(propVal)' |
| HTML | <ELEMENT style="filter:progid:DXImageTransform.Microsoft.(propVal)"> |
| 애트리뷰트 | 속성 | 설명 |
|---|---|---|
| direction | Direction | 필터 효과가 나는 방향을 시계방향의 각도로 반환하거나 설정한다. |
| squaresX | SquaresX | CheckerBoard 필터에 의해 변환에 사용되는 수직 줄의 갯수를 반환하거나 설정한다. |
| squaresY | SquaresY | CheckerBoard 필터에 의해 변환에 사용되는 수평 컬럼의 갯수를 반환하거나 설정한다. |
| 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 |
<STYLE>.butClass{width:100}</STYLE>
<SCRIPT>
var clickBut=false;
function doPlay(job){
divObj.filters[0].Apply();
if (clickBut){
divObj.style.backgroundColor='pink';
clickBut=false;
} else {
divObj.style.backgroundColor='blue';
clickBut=true;
}
divObj.filters[0].Direction=job;
divObj.filters[0].Play();
show.innerHTML=divObj.style.filter+'<BR>Direction=('+divObj.filters[0].Direction+'), ';
show.innerHTML+='SquaresX=('+divObj.filters[0].SquaresX+'), SquaresY=('+divObj.filters[0].SquaresY+')';
}
</SCRIPT>
<DIV id="divObj"
style="height:200;width:400;background-color:pink;
filter:progid:DXImageTransform.Microsoft.CheckerBoard(duration=5,direction='left');">
</DIV>
<BUTTON onclick="doPlay('up')" class="butClass">위쪽으로</BUTTON>
<BUTTON onclick="doPlay('down')" class="butClass">아래쪽으로</BUTTON>
<BUTTON onclick="doPlay('left')" class="butClass">왼쪽으로</BUTTON>
<BUTTON onclick="doPlay('right')" class="butClass">오른쪽으로</BUTTON>
</DIV>
<DIV id=show style="width:600;height:50;border:solid 1 blue;padding:3;margin-left:2em">필터 표시창</DIV>