Checkerboardトランジション

Sample Source......................................................................>>>

<script language="JavaScript"><!--
flg = true;    //2写真を交互に切り替えるためのﾌﾗｸﾞ変数
function Checker(){
  pic.filters[0].Apply();
  if(flg)pic.src = "../../java/jadata/ja02a.jpg";
  else pic.src = "../../java/jadata/pho_003.gif";
  flg = !flg;    //ﾌﾗｸﾞ変数の値を反転する(trueとfalseの切り替え)
  pic.filters[0].Play();
}
function DirecChange(d){  //方向を変える
  pic.filters[0].direction = d;
}
function SquChange(sq){    //格子の大きさを変える
  pic.filters[0].SquaresX = sq;
  pic.filters[0].SquaresY = sq;
}
function DuraChange(speed){    //変化の速さを変える
  pic.filters[0].duration = speed;
}
//--></script>
</head>

<body>
<img id="pic" src="../../java/jadata/pho_003.gif" width="256" height="192"
  style="filter:progid:DXImageTransform.Microsoft
   .Checkerboard(direction=up,SquaresX=10,SquaresY=10,duration=1.5)">
<form name="form1">
２枚の写真を交互に 
<input type="button" name="by1" value="切り替え" onclick="Checker()">
できます。必要に応じて以下のオプションを変更してください。
<p>
方向の変更･･･ 
<input type="radio" name="direc" value="up" checked onclick="DirecChange(this.value)">上方向 
<input type="radio" name="direc" value="down" onclick="DirecChange(this.value)">下方向 
<input type="radio" name="direc" value="left" onclick="DirecChange(this.value)">左方向 
<input type="radio" name="direc" value="right" onclick="DirecChange(this.value)">右方向<br>
格子の大きさ･･･ 
<input type="radio" name="squ" value="5" onclick="SquChange(this.value)">大きく 
<input type="radio" name="squ" value="10" checked  onclick="SquChange(this.value)">普通 
<input type="radio" name="squ" value="15"  onclick="SquChange(this.value)">小さく<br>
変化の速さ･･･ 
<input type="radio" name="dura" value="3" onclick="DuraChange(this.value)">遅く 
<input type="radio" name="dura" value="1.5" checked onclick="DuraChange(this.value)">普通 
<input type="radio" name="dura" value="0.5" onclick="DuraChange(this.value)">速く</p>
</form>

DirectX Transition：Checkerboardトランジション(市松模様の格子状)