clip, clipTop, clipLeft, clipBottom, clipRight 속성 예제


clipTop=
clipLeft=
clipBottom=
clipRight=

결과 표시창

<SCRIPT>
document.onload=setClip();
function setClip(){
  if (selTop.value>=selBottom.value) {showA.innerHTML='<FONT color=red>clipBottom이 clipTop보다 커야 함</FONT>'; return false}
  if (selLeft.value>=selRight.value) {showA.innerHTML='<FONT color=red>clipRight가 clipLeft보다 커야 함</FONT>'; return false}
  imgStr='rect(';
  if (selTop.value==0) imgStr+='auto ';
  else imgStr+=selTop.value+' ';
  if (selLeft.value==0) imgStr+='auto ';
  else imgStr+=selLeft.value+' ';
  if (selBottom.value==225) imgStr+='auto ';
  else imgStr+=selBottom.value+' ';
  if (selRight.value==300) imgStr+='auto)';
  else imgStr+=selRight.value+')';
  imgObj.style.clip=imgStr;
  str='imgObj.style.clip='+imgObj.style.clip+'<BR>';
  str+='imgObj.currentStyle.clipTop='+imgObj.currentStyle.clipTop+'<BR>';
  str+='imgObj.currentStyle.clipBottom='+imgObj.currentStyle.clipBottom+'<BR>';
  str+='imgObj.currentStyle.clipLeft='+imgObj.currentStyle.clipLeft+'<BR>';
  str+='imgObj.currentStyle.clipRight='+imgObj.currentStyle.clipRight;
  showA.innerHTML=str;
}	
</SCRIPT>

<BODY onload="setClip();">
<IMG id="imgObj" src="../../../gif/flower.jpg" width="300" style="position:absolute"><BR>
<P style=position:absolute;top:30;left:450>
clipTop=
<SELECT id="selTop" onchange="setClip()">
<OPTION value=0 selected>auto(0)</OPTION>
<OPTION value=100>100px</OPTION>
<OPTION value=150>150px</OPTION>
<OPTION value=200>200px</OPTION>
</SELECT><BR>
clipLeft=
<SELECT id="selLeft" onchange="setClip()">
<OPTION value=0 selected>auto(0)</OPTION>
<OPTION value=100>100px</OPTION>
<OPTION value=150>150px</OPTION>
<OPTION value=200>200px</OPTION>
<OPTION value=300>300px</OPTION>
</SELECT><BR>
clipBottom=
<SELECT id="selBottom" onchange="setClip()">
<OPTION value=100>100px</OPTION>
<OPTION value=150>150px</OPTION>
<OPTION value=200>200px</OPTION>
<OPTION value=225 selected>auto(225)</OPTION>
</SELECT><BR>
clipRight=
<SELECT id="selRight" onchange="setClip()">
<OPTION value=100>100px</OPTION>
<OPTION value=150>150px</OPTION>
<OPTION value=200>200px</OPTION>
<OPTION value=300 selected>auto(300)</OPTION>
</SELECT>
<DIV id=showA style=position:absolute;left:450;top:130>결과 표시창</DIV>
</P>