鼠标触发图片渐隐渐显效果

忘记∽所有

　　本例中鼠标触发的图片的渐隐渐显效果比较多见，但多数都是用js实现的，需要给图片写很多的事件与函数，如果图片过多的话，工作量会很大。为了减轻我们的工作量，就要用到这个很特殊的东西——DHTML行为（Behavior）。

　　Behavior(行为)可以将复杂的DHTML代码从页面移到更小的、经过封装的、可以再度使用的单元中。其目的就是封装特定的功能在一个HTC(HTML Component)中，而这些功能就可以非常方便的捆绑到页面中的任意元素上。因此我把所有的东西都封装进了HTC文件，利用HTC的特殊性，我们可以很容易地给多个图片实现这种鼠标触发渐隐渐显效果。

　　下面我们先看看具体效果演示：我们首先看到的是一个半透明的图片，当我们把鼠标放上去的时候，图片渐显；鼠标移开、图片渐隐。



　　OK。先来看看插入上边那幅图片使用的代码：
-------------------------------------------------------------------------
<!--样式表部分-->
<style type="text/css">
<!--
.coolalpha {
    behavior:url(eyun_alpha.htc);
    cursor:hand;
    filter:alpha(opacity=50);
}
-->
</style>
<!--图片实现部分-->
<img class="coolalpha" link="你的链接地址" src="你的图片地址" border="0">。
----------------------------------------------------------------------------
　　可以看到，图片代码比普通的<img>标签多了一个"link"属性，它的值就是点击图片后要打开文件的路径。该属性是可选的，如果你不写该属性和属性值，那么点击图片就什么都不会发生。如果你要点击图片来调用一个函数，例如：alert("Hello The World!")，那么你需要这么写：action="alert('Hello The World!')"。注意：link与action属性不能同时出现。

　　而在style部分，我们使用了behavior:url(eyun_alpha.htc)这样一个特殊的语句。其中，eyun_alpha.htc就是今天的主角——封装了实现渐隐渐显效果代码的HTC文件。它的代码如下。


　　eyun_alpha.htc代码及其分析如下。

-----------------------------------------------------------------------
<!--eyunalpla.htc BEGIN-->
<public:component>
<!--给对象添加方法-->
<public:method name="doAdd" />
<public:method name="doReduce" />
<!--给对象添加属性-->
<public:property name="link" value="" />
<public:property name="action" value="" />
<!--给对象添加事件-->
<public:attach event="onmouseover" onevent="doOver()" />
<public:attach event="onmouseout" onevent="doOut()" />
<public:attach event="onclick" onevent="doClick()" />
<script language="JavaScript">
var sTimer;//定义计时器全局变量
var sElementId=uniqueID; //取得对象的uniqueID

//鼠标移上时触发函数
function doOver()
  {window.clearTimeout(sTimer);
  doAdd()
  }

//鼠标移出时触发函数
function doOut()
  {window.clearTimeout(sTimer);
  doReduce();
  }

//点击图片时触发函数
function doClick()
  {if(link!="")//如果有链接，则打开链接文件
    {window.open(link);
      return;
    }
  if(action!="")//如果有调用函数，则执行。
    {eval(action);
      return;
    }
  }

function doAdd()
  {filters.alpha.opacity++;//增加透明度的值（图片会更清晰）
  sTimer=window.setTimeout(sElementId+".doAdd()",10);//每10ms再次调用本函数
  }

function doReduce()
  {if(filters.alpha.opacity>50)//如果透明度大于50%，减少透明度的值（图片会更模糊）
    filters.alpha.opacity--
  else
    {window.clearTimeout(sTimer);
    return
    }
  sTimer=window.setTimeout(sElementId+".doReduce()",10);//每10ms再次调用本函数
  }
</script>
</public:component>
<!--eyunalpla.htc END-->
-------------------------------------------------------------------------------------------------------

　　只要将以上代码保存为eyun_alpha.htc，并且按照前边给出的例子那样调用，你可以通过给多个图片设置相同的class值得方法来方便的控制图片的渐隐渐显！

　　以上代码在windows98/2000+IE5.0、windowsMe+IE5.5、windowsXP/2003 server+IE6.0环境下均可正常工作。