用鼠标实现图片的渐有渐无

鼠标点到图片上，图片就有渐变效果，这个看上去好像不错，但是它也有它的弊端，就是占CPU资源，而且下面的这些效果在firefox之类的浏览器中全都失效！但是我们还是可以欣赏一下的。

1，CSS，JS，IMG一个都不能少

<style type="text/css">
<!--
.trans_img
 {filter:alpha(opacity=30,enabled=1) blendtrans(duration=1);
  border:0 solid black}
-->
</style>
<script language=javascript>
    function transImg(obj,enable)    {
    obj.filters.blendtrans.Apply();
    obj.filters[0].enabled=enable;
    obj.filters.blendtrans.Play();
    }
</script>
<img src="/logo/weisay.gif" class="trans_img" onmouseover="transImg(this,0)" onmouseout="transImg(this,1)">

2，JS & IMG

<script language="JavaScript">
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
  if (object != "[object]"){ //do this so I can take a string too
    setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
    return;
  }
  clearTimeout(nereidFadeTimers[object.sourceIndex]);
  diff = destOp-object.filters.alpha.opacity;
  direction = 1;
  if (object.filters.alpha.opacity > destOp){
    direction = -1;
  }
  delta=Math.min(direction*diff,delta);
  object.filters.alpha.opacity+=direction*delta;
  if (object.filters.alpha.opacity != destOp){
    nereidFadeObjects[object.sourceIndex]=object;
    nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
  }
}
</script>
<a href="/" target="_blank">
<img border="0" src="/logo/weisay.gif" onMouseOut=nereidFade(this,50,10,5) onMouseOver=nereidFade(this,100,10,5) style="FILTER: alpha(opacity=50) " border=0>
</a>

3，有点Flash的味道，一闪而过。

<SCRIPT language=Javascript type=text/javascript>
function trains(id,text){document.all[id].innerHTML=' '+text}
function trainpic(id,text){document.all[id].innerHTML='<img src="'+text+'.gif">'}
function high(which2){
theobject=which2;theobject.filters.alpha.opacity=0
highlighting=setInterval("highlightit(theobject)",50)}
function low(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=100}
function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=15
else if(window.highting)
clearInterval(highlighting)}
</SCRIPT>
<a href="/">
<IMG onmouseover="this.style.filter='alpha(opacity=100)';high(this)" onmouseout="low(this)" src="/logo/weisay.gif" border="0">
</a>

4，还有图片的“黑白转彩色”

<SCRIPT>
function doTrans(filterCode)
{
imgObj.filters[0].apply();
oImg.style.filter = filterCode
imgObj.filters[0].play();
}
</SCRIPT>
<SPAN id=imgObj
onmouseleave='doTrans("gray")'
style="FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); WIDTH: 1px"
onmouseenter='doTrans("")'>
<IMG id=oImg style="FILTER: gray" src="/logo/weisay.gif">
</SPAN>