本实例演示如何在网页上将图像的某种颜色变为透明。
向网页上添加一个IMG对象和一个下拉列表框，设计完成的网页界面如图4-36所示。
图4-36 设计完成的网页
设置IMG对象的name为filterIMG，将图像的style属性中的filter设置为DXImageTransform.Microsoft.chroma：
<IMG style="filter:
progid:DXImageTransform.Microsoft.chroma(color='')"
src="images/chroma.bmp"
name=filterIMG>
图像中哪种颜色被设置为透明是由下拉列表框的onchange事件控制。在下拉列表框中包含有black、tomato、yellowgreen、gold、#99CCFF和#666666六个列表项，当用户在网页上改变下拉列表框的选项时，就会激活onchange事件，通过语句filterIMG.filters. item('DXImageTransform.Microsoft.chroma').color=this.options[this.selectedIndex].value语句设置图像的透明颜色为在列表框中选中的颜色。
<HTML>
<HEAD>
<TITLE>Chroma Filter</TITLE>
</HEAD>
<BODY>
<B> Color:</B>
<SELECT name="select1"
onchange="filterIMG.filters.item
('DXImageTransform.Microsoft.chroma').color=
this.options[this.selectedIndex].value">
<OPTION value="black">Black</OPTION>
<OPTION value="tomato">Tomato</OPTION>
<OPTION value="yellowgreen">Yellow-green</OPTION>
<OPTION value="gold">Gold</OPTION>
<OPTION value="#99CCFF">#99CCFF</OPTION>
<OPTION value="#666666">#666666</OPTION>
</SELECT>
<BR><BR>
<IMG style="filter:
progid:DXImageTransform.Microsoft.chroma(color='')"
src="images/chroma.bmp"
name=filterIMG>
<SCRIPT language="javascript">
select1.onchange()
</SCRIPT>
</BODY>
</HTML>
保存文件，在浏览器中浏览网页文件，初始画面如图4-37所示。
图4-37 初始画面
选择Color为Tomato，结果如图4-38所示。
图4-38 使图像的某种颜色变为透明
E- mail:
本站ICP备案号：
