BasicImage 효과 예제

GrayScale	0 1 false true
Invert	0 1 false true
Mask	0 1 false true
MaskColor	0 65 127 255
Mirror	0 1 false true
Rotation	0 1 2 3
Xray	0 1 false true
Enabled	0 1 false true

필터 표시창

<STYLE>
.but {width:120}
</STYLE>
<SCRIPT>
var obj;
function doShow(){
  str='<FONT color=blue>divObj.style.filter</B></FONT>='+divObj.style.filter+'<BR>';
  str+='GrayScale='+obj.GrayScale+'<BR>';
  str+='Invert='+obj.Invert+'<BR>';
  str+='Mask='+obj.Mask+'<BR>';
  str+='MaskColor='+obj.MaskColor+'<BR>';
  str+='Opacity='+obj.Opacity+'<BR>';
  str+='Rotation='+obj.Rotation+'<BR>';
  str+='XRay='+obj.XRay+'<BR>';
  show.innerHTML=str;
}
</SCRIPT>
<DIV style="width:10;padding:5;background:pink;font-size:30;line-height:1.2em;font-weight:bold;color:blue">
<DIV id="divObj" style="border:solid 5 blue;padding:5;width:400;height:100;
filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)"><IMG src="../../../gif/rfproperty.gif" width=100><BR>
BasicImage 효과 예제</DIV>
<SCRIPT>obj=divObj.filters[0];</SCRIPT>
</DIV>

<TABLE border=1 width=600>
<COL bgcolor=eeeeee>
<TR>
<TD>GrayScale</TD>
<TD>
<BUTTON onclick="obj.grayScale=0;doShow()" class=but>0</BUTTON>
<BUTTON onclick="obj.grayScale=1;doShow()" class=but>1</BUTTON>
</TD>
</TR>
<TR>
<TD>Invert</TD>
<TD>
<BUTTON onclick="obj.Invert=0;doShow()" class=but>0</BUTTON>
<BUTTON onclick="obj.Invert=1;doShow()" class=but>1</BUTTON>
</TD>
</TR>
<TR>
<TD>Mask</TD>
<TD>
<BUTTON onclick="obj.Mask=0;doShow()" class=but>0</BUTTON>
<BUTTON onclick="obj.Mask=1;doShow()" class=but>1</BUTTON>
</TD>
</TR>
<TR>
<TD>MaskColor</TD>
<TD>
<BUTTON onclick="obj.MaskColor='0';doShow()" class=but>0</BUTTON>
<BUTTON onclick="obj.MaskColor='65';doShow()" class=but>65</BUTTON>
<BUTTON onclick="obj.MaskColor='127';doShow()" class=but>127</BUTTON>
<BUTTON onclick="obj.MaskColor='255';doShow()" class=but>255</BUTTON>
</TD>
</TR>
<TR>
<TD>Mirror</TD>
<TD>
<BUTTON onclick="obj.Mirror='0';doShow()" class=but>0</BUTTON>
<BUTTON onclick="obj.Mirror='1';doShow()" class=but>1</BUTTON>
</TD>
</TR>
<TR>
<TD>Rotation</TD>
<TD>
<BUTTON onclick="obj.Rotation='0';doShow()" class=but>0</BUTTON>
<BUTTON onclick="obj.Rotation='1';doShow()" class=but>1</BUTTON>
<BUTTON onclick="obj.Rotation='2';doShow()" class=but>2</BUTTON>
<BUTTON onclick="obj.Rotation='3';doShow()" class=but>3</BUTTON>
</TD>
</TR>
<TR>
<TD>Xray</TD>
<TD>
<BUTTON onclick="obj.Xray='0';doShow()" class=but>0</BUTTON>
<BUTTON onclick="obj.Xray='1';doShow()" class=but>1</BUTTON>
</TD>
</TR>
<TR>
<TD>Enabled</TD>
<TD>
<BUTTON onclick="obj.Enabled='false';doShow()" class=but>false</BUTTON>
<BUTTON onclick="obj.Enabled='true';doShow()" class=but>true</BUTTON>
</TD>
</TR>
</TABLE>
<DIV id=show style="width:600;height:50;border:solid 1 blue;padding:3;font-size:80%">필터 표시창</DIV>