개체의 원본 내용을 서양 장기판처럼 작은 사각형으로 잘라 점진적으로 변화시켜 새로운 내용으로 표현한다.

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

애트리뷰트 속성 설명
direction Direction 필터 효과가 나는 방향을 시계방향의 각도로 반환하거나 설정한다.
squaresX SquaresX CheckerBoard 필터에 의해 변환에 사용되는 수직 줄의 갯수를 반환하거나 설정한다.
squaresY SquaresY CheckerBoard 필터에 의해 변환에 사용되는 수평 컬럼의 갯수를 반환하거나 설정한다.
특기
적용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에서 필터 속성 예제

필터 표시창
<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>