I would like to fade / unfade a div element containing text, img ...
UnFade is activated when onmouseover event is thrown by the div element.
Fade is activated when onmouseout event is thrown by the div element.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div id="Test1" onmouseover="MseOver(event,'Test1');" onmouseout="MseOut(event,'Test1');"
style="position:relative;width:200px;height:150px;background-color:red;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" >
</div>
<script language="JavaScript" type="text/javascript">
<!--
function MseOver(zxce,zxcid){
document.getElementById(zxcid).set=true;
if (zxcCkEventObj(zxce,true)){ zxcEleOpacity(zxcid,100,10,100,20); }
}
function MseOut(zxce,zxcid){
if (zxcCkEventObj(zxce)){ zxcEleOpacity(zxcid,10,100); }
}
function zxcCkEventObj(zxce,zxcftt){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=tt_eobj.parentNode;
var zxcft;
if (!zxcftt){ zxcft=zxcEventTo(zxce); }
else { zxcft=zxcEventFrom(zxce); }
if (zxcft.set){ return false; }
while (zxcft.parentNode){
if (zxcft.set){ return false; }
zxcft=zxcft.parentNode;
}
return true;
}
function zxcEventFrom(zxce){
var zxcfrom;
if (!zxce) var zxce=window.event;
if (zxce.relatedTarget) zxcfrom=zxce.relatedTarget;
else if (zxce.fromElement) zxcfrom=zxce.fromElement;
return zxcfrom
}
function zxcEventTo(zxce){
var zxcto;
if (!zxce) var zxce = window.event;
if (zxce.relatedTarget) zxcto=zxce.relatedTarget;
else if (zxce.toElement) zxcto=zxce.toElement;
return zxcto
}
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
// Element Opacity (25-April-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// The effect is only valid for browsers which recognise the opacity property
// i.e. Mozilla Based Browsers plus IE5+, Netscape and Konkorer.
// The element must be a element which has opacity property
// (Images will need to be in a <DIV>)
// The initial opacity may be established from a <BODY> or window onload event call
// and the effect applied or reversed from any event call.
// There may be as many application on a page as required.
// Application Notes
// **** Initialising the Opacity
// The element opacity may established from a <BODY> or window onload event call
// The element must be allocated a unique ID name
// e.g. <body onload="zxcEleOpacity('Test1',50);">
// parameter 0 = unique ID name of the element (string)
// parameter 1 = the start opacity value (0 to 100) (digit)
// **** Executing the Effect
// e.g. <div id="Test1" onmouseover="zxcEleOpacity('Test1',100,10,100,20);" style="position:relative;width:100px;height:50px;background-color:red;" ></div>
// Where:
// parameter 0 = object or unique ID name of the element (object or string)
// parameter 1 = the start opacity value (0 to 100) (digit)
// parameter 2 = the finish opacity value (0 to 100) (digit)
// parameter 3 = (optional) the speed (1 = fast, 500 = slow) (digit) (default 100 milliSec)
// parameter 4 = (optional) the number of opacity steps (digit) (default 50)
// To reverse the effect
// transpose parameter 1 and parameter 2
// The speed parameter 3 may also be changed
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// The Functional Code(about 2K) is best as an External JavaScript
// Tested with IE6 and Mozilla FireFox
// Functional Code - NO NEED to Change
var zxcOOPCnt=0;
var zxcOpc;
function zxcEleOpacity(zxcm,zxcsrt,zxcfin,zxcd,zxcstp){
if (typeof(zxcm)=='string'){ zxcm=document.getElementById(zxcm); }
if (zxcm.style.MozOpacity!=null||zxcm.style.opacity!=null||zxcm.style.filter!=null||zxcm.style.KHTMLOpacity!=null){ zxcOpc=true; }
if (!zxcm.oop){
zxcsrt=zxcsrt||100;
zxcOpacity(zxcm.style,zxcsrt);
zxcm.oop=new zxcOOPOpacEle(zxcm,zxcsrt,zxcfin,zxcd,zxcstp);
}
clearTimeout(zxcm.oop.to);
zxcm.oop.fin=isNaN(zxcfin)?zxcm.oop.fin:zxcfin;
zxcm.oop.srt=isNaN(zxcsrt)?zxcm.oop.srt:zxcsrt;
zxcm.oop.delay=isNaN(zxcd)?zxcm.oop.delay:zxcd;
zxcm.oop.stp=isNaN(zxcstp)?zxcm.oop.stp:zxcstp;
zxcm.oop.inc=zxcSteps(zxcm.oop.stp,[zxcm.oop.srt,zxcm.oop.fin]);
zxcm.oop.dir=1; zxcm.oop.cnt=0;
if (zxcm.oop.srt>zxcm.oop.fin){ zxcm.oop.cnt=zxcm.oop.inc.length; zxcm.oop.dir=-1; }
if (!zxcOpc){ zxcm.style.visibility=zxcm.oop.dir<0?'hidden':'visible'; }
zxcm.oop.cngopac();
}
function zxcOOPOpacEle(zxcm,zxcsrt,zxcfin,zxcd,zxcstp,zxcx){
this.obj=zxcm.style;
this.ref='zxcoopopac'+zxcOOPCnt++;
window[this.ref]=this;
this.fin=isNaN(zxcfin)?0:zxcfin;
this.srt=isNaN(zxcsrt)?100:zxcsrt;
this.delay=isNaN(zxcd)?100:zxcd;
this.stp=isNaN(zxcstp)?50:zxcstp;
this.to=null;
}
zxcOOPOpacEle.prototype.cngopac=function(){
if ((this.cnt>0&&this.dir<0)||(this.cnt<this.inc.length-1&&this.dir>0)){
this.cnt+=this.dir;
zxcOpacity(this.obj,(this.inc[this.cnt]));
this.setTimeOut('cngopac();',200);
}
}
zxcOOPOpacEle.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}
function zxcOpacity(zxcobj,zxcop){
if (zxcop>100||zxcop<.0010||!zxcop){ return }
if (zxcobj.MozOpacity!=null){ zxcobj.MozOpacity=(zxcop/100)-.001; }
else if (zxcobj.opacity!=null){ zxcobj.opacity=(zxcop/100)-.001; }
else if (zxcobj.filter!=null){ zxcobj.filter='alpha(opacity='+zxcop+')'; }
else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcop/100)-.001; }
}
function zxcSteps(zxcstps,zxcsary){
zxctary=[];
for (zxc1=0;zxc1<zxcstps;zxc1++){
zxctary[zxc1]=Math.floor(Math.abs((zxcsary[0]-zxcsary[1])/(zxcstps-1))*zxc1+Math.min(zxcsary[0],zxcsary[1]));
if (zxctary[zxc1]==0){zxctary[zxc1]=0.01; }
}
if (zxcsary[2]>zxcsary[3]){ zxctary=zxctary.reverse(); }
return zxctary
}
//-->
</script>
</body>
</html>
Before you post, read our: 
