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

<script language="JavaScript"><!--
var bm = 0;     //clip:rectの下端位置
var timer1,timer2;
function GoStopTB()     {
        if(bt1.innerText == "開始"){
                pic2.style.filter = "invert()";//色反転
                GoTB();
        }else{
                BackTB();
        }
}
function GoTB(){
        if(bm < 192){
                pic2.style.clip = "rect(0 256 " + bm + " 0)";
                bm += 2;
                timer1 = setTimeout("GoTB()",30);
        }else{
                clearTimeout(timer1);
                bt1.innerText = "元に戻す";
        }
}
function BackTB(){
        if(bm > 0){
                pic2.style.clip = "rect(0 256 " + bm + " 0)";
                bm -= 2;
                timer2 = setTimeout("BackTB()",30);
        }else{
                clearTimeout(timer2);
                bt1.innerText = "開始";
        }
}

var rt = 0;
var timer3,timer4;
function GoStopLR()     {
        if(bt2.innerText == "開始"){
                pic2.style.filter = "gray()";//灰色に
                GoLR();
        }else{
                BackLR();
        }
}
function GoLR(){
        if(rt < 256){
                pic2.style.clip = "rect(0 " + rt + " 192 0)";;
                rt += 5;
                timer3 = setTimeout("GoLR()",50);
        }else{
                clearTimeout(timer3);
                bt2.innerText = "元に戻す";
        }
}
function BackLR(){
        if(rt > 0){
                pic2.style.clip = "rect(0 " + rt + " 192 0)";;
                rt -= 5;
                timer4 = setTimeout("BackLR()",50);
        }else{
                clearTimeout(timer4);
                bt2.innerText = "開始";
        }
}
//--></script>
</head>

<p>
<img id="pic1" style="position:absolute;top:220;left:250;clip:rect(0 256 192 0)";
　　 src="../../images/cut/sakura.gif" width="256" height="192" border="0"> 
<img id="pic2" style="position:absolute;top:220;left:250;clip:rect(0 256 192 0)"
 　　src="../../images/cut/sakura.gif" width="256" height="192" border="0"> </p>
<p>
　色反転する<button id="bt1" onclick="GoStopTB();">開始</button>
　 灰色にする<button id="bt2" onclick="GoStopLR();">開始</button>
</p>