【Javascript】クロスブラウザを制する Part 2　2-4 クリップ

<script language='JavaScript'>
<!--

  function setCLIP(idName,clipT,clipR,clipB,clipL){

    var clipst=
      'rect('+clipT+','+clipR+','+clipB+','+clipL+')' 

    if(document.getElementById)        //N6,Moz,IE5,IE6用
      document.getElementById(idName).style.clip = clipst 
    else if(document.layers)                      //NN4用
      with(document.layers[idName].clip){
        top    = clipT    ; right = clipR
        bottom = clipB ; left  = clipL 
      }
    else if(document.all)                        //IE4用
      document.all(idName).style.clip=clipst 

  }

//-->
</script>

<form> 

  <input type="button" value="0,200,100,0" 
         onclick="setCLIP('daibustu',0,200,100,0)"> 
  <input type="button" value="100,200,200,0"  
         onclick="setCLIP('daibustu',100,200,200,0)"> 
  <input type="button" value="200,200,300,0"  
         onclick="setCLIP('daibustu',200,200,300,0)"> 

</form> 

<!--このレイヤーにクリップがかかります--> 
<div id="daibustu" 
     style="position:absolute;left:50px;top:180px;
            clip:rect(200,200,300,0)"> 
    <img src="daibu12.gif">
</div>