本实例演示如何在网页上输出经过颜色变换的图像，如灰度图像、反转图像等。
向网页上添加两个DIV层，其中左侧图层用于显示图像和文字“Delicious Produce!”，右侧图层作为下拉列表框的容器，设计完成的网页界面如图4-14所示。
图4-14 设计完成的网页
设置左侧DIV图层的id为filterDIV，将图层的style属性中的filter设置为DXImageTransform.Microsoft.Alpha：
<DIV id="filterDIV"
style="position:absolute; top:40; left:10;
width:240; height: 180; background: gold;
padding:5px; font-size:15pt; border:1px solid black;
filter:progid:DXImageTransform.Microsoft.BasicImage(
Rotation=0,Mirror=0,
Invert=0,XRay=0,
Grayscale=0,Opacity=1.00,
Mask=0), ;
color:white; text-align:center; font-weight:bold ">
<IMG src="images/fruit.jpg"
style="position:absolute; top:45; left:40">
Delicious Produce!
</DIV>
图层中的颜色处理是由各个下拉列表框的onchange事件控制，下面以Grayscale对应的下拉列表框为例来说明：
<B>Grayscale:</B>
<SELECT onchange="filterDIV.filters.item(0).grayscale=
this.options[this.selectedIndex].value">
<OPTION value="0">0</OPTION>
<OPTION value="1">1</OPTION>
</SELECT>
在Grayscale下拉列表框中包含有“0”和“1”两个列表项，当用户在网页上改变Grayscale下拉列表框的选项时，就会激活onchange事件，通过filterDIV.filters.item(0). grayscale=this.options[this.selectedIndex].value语句设置filterDIV图层是否以灰度形式显示图像。
<HTML>
<HEAD>
<TITLE>BasicImage Transition</TITLE>
</HEAD>
<BODY style="font-family:verdana; font-size:9pt">
<DIV style="position:absolute; top:45; left:270; width:500">
<BR/><BR/><BR/>
<B>Rotation:</B>
<SELECT onchange="filterDIV.filters.item(0).rotation=
this.options[this.selectedIndex].value">
<OPTION value="0">0</OPTION>
<OPTION value="1">1</OPTION>
<OPTION value="2">2</OPTION>
<OPTION value="3">3</OPTION>
</SELECT>
<B>Opacity:</B>
<SELECT onchange="filterDIV.filters.item(0).opacity=
this.options[this.selectedIndex].value">
<OPTION value="0.05">.05</OPTION>
<OPTION value="0.15">.15</OPTION>
<OPTION value="0.25">.25</OPTION>
<OPTION value="0.35">.35</OPTION>
<OPTION value="0.35">.45</OPTION>
<OPTION value="0.55">.55</OPTION>
<OPTION value="0.65">.65</OPTION>
<OPTION value="0.75">.75</OPTION>
<OPTION value="0.85">.85</OPTION>
<OPTION value="0.95">.95</OPTION>
<OPTION SELECTED value="1">1</OPTION>
</SELECT>
<BR/><BR/>
<B>Grayscale:</B>
<SELECT onchange="filterDIV.filters.item(0).grayscale=
this.options[this.selectedIndex].value">
<OPTION value="0">0</OPTION>
<OPTION value="1">1</OPTION>
</SELECT>
<B>X-ray:</B>
<SELECT onchange="filterDIV.filters.item(0).xray=
this.options[this.selectedIndex].value">
<OPTION value="0">0</OPTION>
<OPTION value="1">1</OPTION>
</SELECT><BR/><BR/>
<B>Mirror:</B>
<SELECT onchange="filterDIV.filters.item(0).mirror=
this.options[this.selectedIndex].value">
<OPTION value="0">0</OPTION>
<OPTION value="1">1</OPTION>
</SELECT>
<B>Invert:</B>
<SELECT onchange="filterDIV.filters.item(0).invert=
this.options[this.selectedIndex].value">
<OPTION value="0">0</OPTION>
<OPTION value="1">1</OPTION>
</SELECT>
</DIV>
<DIV id="filterDIV"
style="position:absolute; top:40; left:10;
width:240; height: 180; background: gold;
padding:5px; font-size:15pt; border:1px solid black;
filter:progid:DXImageTransform.Microsoft.BasicImage(
Rotation=0,Mirror=0,
Invert=0,XRay=0,
Grayscale=0,Opacity=1.00,
Mask=0), ;
color:white; text-align:center; font-weight:bold ">
<IMG src="images/fruit.jpg"
style="position:absolute; top:45; left:40">
Delicious Produce!
</DIV>
</BODY>
</HTML>
保存文件，在浏览器中浏览网页文件，初始画面如图4-15所示。
图4-15 初始画面
选择Rotation为2，结果如图4-16所示。
图4-16 图像的颜色变换效果之一
选择Opacity为.55，结果如图4-17所示。
选择Grayscale为1，结果如图4-18所示。
图4-17 图像的颜色变换效果之二
图4-18 图像的颜色变换效果之三
选择X-ray为1，结果如图4-19所示。
图4-19 图像的颜色变换效果之四
选择Mirror为1，结果如图4-20所示。
图4-20 图像的颜色变换效果之五
选择Invert为1，结果如图4-21所示。
图4-21 图像的颜色变换效果之六
E- mail:
本站ICP备案号：
