主要用到了css的滤镜的效果:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
function c_opacity(cur, number) {
if (number>=0&&number<=100)
cur.filters.alpha.opacity=number
}
</script>
</HEAD>
<BODY>
<div>
<p align="center">
<a href="#"><img name="image1" src='E:\J2EEWS\SkyAnalysis\WebRoot\images\admin_45.gif' width="35" height="25" border="0" style="filter:alpha(opacity=35)" onMouseOver=c_opacity(image1,100) onMouseOut=c_opacity(image1,35)>
</a>
</p>
<!--<p align="center" ><a href="#" onclick="changeStyle(image1);">是你要的效果么?</a></p> -->
</div>
</BODY>
</HTML>
上面的是鼠标放上去变亮,当鼠标离开时变模糊。还有一个就是:来回切换图片的使图片变亮的做法:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
function c_opacity(curImage) {
if (curImage=='image1') {
document.getElementById(curImage).filters.alpha.opacity=100;
document.getElementById("image2").filters.alpha.opacity=35;
} else if (curImage=='image2') {
document.getElementById(curImage).filters.alpha.opacity=100;
document.getElementById("image1").filters.alpha.opacity=35;
}
}
</script>
</HEAD>
<BODY>
<div>
<p align="center">
<a href="#" onclick="c_opacity('image1');"><img id="image1" src='E:\J2EEWS\SkyAnalysis\WebRoot\images\admin_45.gif' width="35" height="25" border="0" style="filter:alpha(opacity=35)">
</a>
<a href="#" onclick="c_opacity('image2');"><img id="image2" src='E:\J2EEWS\SkyAnalysis\WebRoot\images\admin.jpg' width="35" height="25" border="0" style="filter:alpha(opacity=35)">
</a>
</p>
<!--<p align="center" ><a href="#" onclick="changeStyle(image1);">是你要的效果么?</a></p> -->
</div>
</BODY>
</HTML>
<!--
图片可以自己来换。
-->