CSS滤镜全接触

CSS滤镜全接触

作者:Eric

CSS滤镜制作Dhtml实例(2)

　　下面我们来看一下Alpha滤镜对图像产生的效果,这里有三个例子:

　　1) 请将鼠标移到下面的图像上

　　效果不错吧,来看看源代码,下面的代码是放在<head></head>之间的:

　　<SCRIPT language=JavaScript1.2>
　　function makevisible(cur,which){
　　if (which==0)
　　cur.filters.alpha.opacity=100 //设置鼠标移上时图像的透明度
　　else
　　cur.filters.alpha.opacity=20 //设置鼠标移出图像时的透明度
　　}
　

　　以下代码是放在<body></body>之间您需要的位置上的:

　　前面说过了,Alpha滤镜是把一个对象与背景混合,通俗地说,就设定一个对象的透明度,上面的红色部分opacity=20就是设定透明度,这是初始化使图像的透明度为20,当鼠标触发Javascript后,图像的透明度就会像<SCRIPT>...</SCRIPT>之间定义的那样变化了.

　　2) 请将鼠标移到下面的图像上

　　下面的代码是放在<head></head>之间的:

　　<SCRIPT language=JavaScript1.2>
　　function high(which2){
　　theobject=which2
　　highlighting=setInterval("highlightit(theobject)",50)
　　}
　　function low(which2){
　　clearInterval(highlighting)
　　which2.filters.alpha.opacity=20 //设置鼠标移出图像时的透明度
　　}
　　function highlightit(cur2){
　　if (cur2.filters.alpha.opacity<100)
　　cur2.filters.alpha.opacity+=5
　　else if (window.highlighting)
　　clearInterval(highlighting)
　　}
　　</SCRIPT>

　　以下代码是放在<body></body>之间您需要的位置上的:

　　<img height=60 width=200 onMouseOut=low(this) onMouseOver=high(this) src="cloud.gif" style="FILTER: alpha(opacity=20)">//初始化图像的透明度

　　3) 再看看下面的图像,自页面载入以后一直这样变亮,变暗.

　　源代码如下,是放在<body></body>之间您需要的位置上的,并要修改<body>语句为<body onload=fade()>:

　　<img alt=Image border=0 name=u src="cloud.gif" style="FILTER: alpha(opacity=0)">
//初始化图像的透明度

　　<script language=JavaScript>
　　var b = 1;
　　var c = true;

　　这几个特效有什么用呢?我曾经在那个网站上看到,用上面第一个例子,做成了图片链接导航菜单,效果非常的好,这与其他的用处,只有发挥你的想象了.