本实例演示如何在网页上使图像具有阴影效果。
向网页上添加一个IMG对象和三个下拉列表框，设计完成的网页界面如图4-39所示。
图4-39 设计完成的网页
设置IMG对象的name为filterIMG，将图像的style属性中的filter设置为DXImageTransform.Microsoft.dropshadow：
<IMG name="filterIMG" src="images/fruit.jpg"
style="filter:progid:DXImageTransform.Microsoft.dropshadow(
positive='true', color='#666666',
offX='5', offY='5')">
图像的阴影大小以及阴影的颜色是由各个下拉列表框的onchange事件控制，下面以Color对应的下拉列表框为例来说明：
<B> Color:</B>
<SELECT onchange="filterIMG.filters.item(0).color=
this.options[this.selectedIndex].value">
<OPTION value="gray">Gray</OPTION>>
<OPTION value="black">Black</OPTION>
<OPTION value="Brown">Brown</OPTION>
<OPTION value="Tomato">Tomato</OPTION>
<OPTION value="Yellowgreen">Yellow-green</OPTION>
<OPTION value="Gold">Gold</OPTION>
</SELECT><BR/><BR/>
在Color下拉列表框中包含有Gray、Black、Brown、Tomato、Yellow-green和Gold六个列表项，当用户在网页上改变Color下拉列表框的选项时，就会激活onchange事件，通过语句filterIMG.filters.item(0).color=this.options[this.selectedIndex].value设置filterIMG图像的阴影颜色。
<HTML>
<HEAD>
<TITLE>DropShadow Filter</TITLE>
</HEAD>
<BODY>
<B> offX:</B>
<SELECT onchange="filterIMG.filters.item(0).offX=
this.options[this.selectedIndex].value">
<OPTION value="0">0</OPTION>
<OPTION value="5" SELECTED>5</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="15">15</OPTION>
<OPTION value="20">20</OPTION>
<OPTION value="30">30</OPTION>
</SELECT>
<B> offY:</B>
<SELECT onchange="filterIMG.filters.item(0).offY=
this.options[this.selectedIndex].value">
<OPTION value="0">0</OPTION>
<OPTION value="5" SELECTED>5</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="15">15</OPTION>
<OPTION value="20">20</OPTION>
<OPTION value="30">30</OPTION>
</SELECT>
<BR/><BR/>
<B> Color:</B>
<SELECT onchange="filterIMG.filters.item(0).color=
this.options[this.selectedIndex].value">
<OPTION value="gray">Gray</OPTION>>
<OPTION value="black">Black</OPTION>
<OPTION value="Brown">Brown</OPTION>
<OPTION value="Tomato">Tomato</OPTION>
<OPTION value="Yellowgreen">Yellow-green</OPTION>
<OPTION value="Gold">Gold</OPTION>
</SELECT><BR/><BR/>
<IMG name="filterIMG" src="images/fruit.jpg"
style="filter:progid:DXImageTransform.Microsoft.dropshadow(
positive='true', color='#666666',
offX='5', offY='5')">
</BODY>
</HTML>
保存文件，在浏览器中浏览网页文件，初始画面如图4-40所示。
图4-40 初始画面
选择Color为Yellow-green、offX为15、offY为20，结果如图4-41所示。
图4-41 带阴影的图像
E- mail:
本站ICP备案号：
