vwphillips
01-08-2006, 04:50 PM
try this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body onload="zxcInitOpacity('Test1',500,10,10,50);">
<center>
<div id="Test1" style="position:relative;width:100px;height:50px;background-color:red;" onmouseover="zxcOpacityDo('Test1');" ></div>
<br>
<div style="position:relative;width:100px;height:50px;background-color:blue;" onmouseout="zxcOpacityDo(this);" onmouseover="zxcOpacityDo(this,100,20,100,10);" ></div>
</center>
<script language="JavaScript" type="text/javascript">
<!--
// Element Opacity (08-12-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// The element must be a element which has opacity property
// The effect is only valid for browsers which recognise the opacity property
// IE5+, Mozilla, Netscape and Konkorer
// The initial opacity may be established from a <BODY> or window onload event call
// and the effect from any event call.
// Repeating the call will reverse the effect
// There may be as many application on a page as required.
// Application Notes
// **** Initialising the Opacity
// Normally established from a <BODY> or window onload event call
// The element must be allocated a unique ID name
// e.g. <body onload="zxcInitOpacity('Test1',500,10,10,50);">
// parameter 0 = unique ID name of the element (string)
// parameter 1 = the speed (1 = fast, 500 = slow) (digit)
// parameter 2 = the number of opacity steps (digit)
// parameter 3 = the start opacity value (0 to 100) (digit)
// parameter 4 = the finish opacity value (0 to 100) (digit)
// **** Executing the Effect
// e.g. <div id="Test1" onmouseover="zxcOpacityDo('Test1',500,10,10,50);" 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)
// NOTE: parameters 1 to 4 only need to be specified once and if the element opacity has not been initialised
// parameter 1 = the speed (1 = fast, 500 = slow) (digit)
// parameter 2 = the number of opacity steps (digit)
// parameter 3 = the start opacity value (0 to 100) (digit)
// parameter 4 = the finish opacity value (0 to 100) (digit)
// 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 zxcCnt=0;
function zxcInitOpacity(zxcm,zxcd,zxcstp,zxcsrt,zxcfin){
if (typeof(zxcm)=='string'){ zxcm=document.getElementById(zxcm); }
if (!zxcm.oop){
zxcm.tog=true
zxcm.oop=new zxcOOPOpac(zxcm,zxcd,zxcstp,zxcsrt,zxcfin);
zxcOpacity(zxcm.style,zxcm.oop.inc[0]);
}
}
function zxcOpacityDo(zxcm,zxcd,zxcstp,zxcsrt,zxcfin){
if (typeof(zxcm)=='string'){ zxcm=document.getElementById(zxcm); }
if (!zxcm.oop){
zxcInitOpacity(zxcm,zxcd,zxcstp,zxcsrt,zxcfin);
}
clearTimeout(zxcm.oop.to);
zxcm.oop.up();
if (zxcm.tog){
zxcm.oop.updown=true;
zxcm.oop.up();
zxcm.tog=false;
}
else {
zxcm.oop.updown=false;
zxcm.oop.down();
zxcm.tog=true;
}
}
function zxcOOPOpac(zxcm,zxcd,zxcstp,zxcsrt,zxcfin){
this.obj=zxcm.style;
this.ref='zxcoopopac'+zxcCnt;
window[this.ref]=this;
this.updown=true;
this.cnt=0;
this.delay=zxcd;
this.inc=zxcSteps(zxcstp,[zxcsrt,zxcfin]);
if (zxcsrt>zxcfin){ this.inc=this.inc.reverse(); }
this.to=null;
zxcCnt++;
}
zxcOOPOpac.prototype.down=function(){
zxcOpacity(this.obj,(this.inc[this.cnt]));
if (this.cnt>0&&!this.updown){ this.cnt--; this.setTimeOut("down();",this.delay); }
}
zxcOOPOpac.prototype.up=function(){
zxcOpacity(this.obj,(this.inc[this.cnt]));
if (this.cnt<this.inc.length-1&&this.updown){ this.cnt++; this.setTimeOut("up();",this.delay); }
}
zxcOOPOpac.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
}
function zxcOpacity(zxcobj,zxcop) {
if (zxcop>100||zxcop<0){ 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 (zxcsary[2]>zxcsary[3]){ zxctary=zxctary.reverse(); }
return zxctary
}
//-->
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body onload="zxcInitOpacity('Test1',500,10,10,50);">
<center>
<div id="Test1" style="position:relative;width:100px;height:50px;background-color:red;" onmouseover="zxcOpacityDo('Test1');" ></div>
<br>
<div style="position:relative;width:100px;height:50px;background-color:blue;" onmouseout="zxcOpacityDo(this);" onmouseover="zxcOpacityDo(this,100,20,100,10);" ></div>
</center>
<script language="JavaScript" type="text/javascript">
<!--
// Element Opacity (08-12-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// The element must be a element which has opacity property
// The effect is only valid for browsers which recognise the opacity property
// IE5+, Mozilla, Netscape and Konkorer
// The initial opacity may be established from a <BODY> or window onload event call
// and the effect from any event call.
// Repeating the call will reverse the effect
// There may be as many application on a page as required.
// Application Notes
// **** Initialising the Opacity
// Normally established from a <BODY> or window onload event call
// The element must be allocated a unique ID name
// e.g. <body onload="zxcInitOpacity('Test1',500,10,10,50);">
// parameter 0 = unique ID name of the element (string)
// parameter 1 = the speed (1 = fast, 500 = slow) (digit)
// parameter 2 = the number of opacity steps (digit)
// parameter 3 = the start opacity value (0 to 100) (digit)
// parameter 4 = the finish opacity value (0 to 100) (digit)
// **** Executing the Effect
// e.g. <div id="Test1" onmouseover="zxcOpacityDo('Test1',500,10,10,50);" 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)
// NOTE: parameters 1 to 4 only need to be specified once and if the element opacity has not been initialised
// parameter 1 = the speed (1 = fast, 500 = slow) (digit)
// parameter 2 = the number of opacity steps (digit)
// parameter 3 = the start opacity value (0 to 100) (digit)
// parameter 4 = the finish opacity value (0 to 100) (digit)
// 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 zxcCnt=0;
function zxcInitOpacity(zxcm,zxcd,zxcstp,zxcsrt,zxcfin){
if (typeof(zxcm)=='string'){ zxcm=document.getElementById(zxcm); }
if (!zxcm.oop){
zxcm.tog=true
zxcm.oop=new zxcOOPOpac(zxcm,zxcd,zxcstp,zxcsrt,zxcfin);
zxcOpacity(zxcm.style,zxcm.oop.inc[0]);
}
}
function zxcOpacityDo(zxcm,zxcd,zxcstp,zxcsrt,zxcfin){
if (typeof(zxcm)=='string'){ zxcm=document.getElementById(zxcm); }
if (!zxcm.oop){
zxcInitOpacity(zxcm,zxcd,zxcstp,zxcsrt,zxcfin);
}
clearTimeout(zxcm.oop.to);
zxcm.oop.up();
if (zxcm.tog){
zxcm.oop.updown=true;
zxcm.oop.up();
zxcm.tog=false;
}
else {
zxcm.oop.updown=false;
zxcm.oop.down();
zxcm.tog=true;
}
}
function zxcOOPOpac(zxcm,zxcd,zxcstp,zxcsrt,zxcfin){
this.obj=zxcm.style;
this.ref='zxcoopopac'+zxcCnt;
window[this.ref]=this;
this.updown=true;
this.cnt=0;
this.delay=zxcd;
this.inc=zxcSteps(zxcstp,[zxcsrt,zxcfin]);
if (zxcsrt>zxcfin){ this.inc=this.inc.reverse(); }
this.to=null;
zxcCnt++;
}
zxcOOPOpac.prototype.down=function(){
zxcOpacity(this.obj,(this.inc[this.cnt]));
if (this.cnt>0&&!this.updown){ this.cnt--; this.setTimeOut("down();",this.delay); }
}
zxcOOPOpac.prototype.up=function(){
zxcOpacity(this.obj,(this.inc[this.cnt]));
if (this.cnt<this.inc.length-1&&this.updown){ this.cnt++; this.setTimeOut("up();",this.delay); }
}
zxcOOPOpac.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
}
function zxcOpacity(zxcobj,zxcop) {
if (zxcop>100||zxcop<0){ 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 (zxcsary[2]>zxcsary[3]){ zxctary=zxctary.reverse(); }
return zxctary
}
//-->
</script>
</body>
</html>
TOP
