Menu
The website is [url]http://www.bh-wbpastoralcharge.net/jaks
When you hover over the links on the top, the banner image fades to a certain color. This is done by quickly changing the opacity (as you can see when you look at the javascript). The thing is, when you move over a link quickly, the fadeIn starts working which is fine, but the fadeOut starts working from an opacity of 100, and because your cursor has not been over the link long enough to allow the fadeIn function to get the opacity to 100, then it looks a bit weird.
So I was looking for a way to keep track of the current opacity so that if you move your mose over a link quickly, the fadeOut will start to happen from the highest point that the fadeIn left off at.
Hopefully somebody could help me out.
P.S. I think this gets quite tricky when knowing that at the end result of the fadeOut function, a change is made to the zIndex of the style of the object which MUST happen, whether it’s at the end of that fadeOut function, or the beginning of the next fadeIn function when your cursor starts to hover over another link.
I’m going to keep working on it, but I’m also going to keep checking back here for somebody’s generous help.
[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst img {
position:absolute;left:0px;top:0px;width:785px;height:175px;
}
/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (02-December- 2007) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk
// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// **** Application Notes
// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//
// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
// where:
// parameter 0 = 'left', 'top', 'width', 'height'. (string)
// Note: the first character after the hyphen must be upper case, all others lower case.
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 3 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
//
// Note 1: The function may be re-executed with a different set of parameters (start/finish time or period)
// whenever required, say from an onclick/mouseover/out event.
// The period parameter will be retained unless re-specified.
// Note 2: Sucessive calls with the same start and finish parameters will result in a 'toggle'.
//
// **** Advanced Applications
//
// It may be required to access the current value of the effect.
// The element effect is accessible from the element property
// element effect = elementobject[mode.replace('-','')+'oop'];
// where mode is parameter 0 of the initial call.
// An array storing the current, start and finish values of the element effect may be accessed
// from the element effect.data as fields 0, 1 and 2 respectively
//
// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//
// **** Functional Code - NO NEED to Change
function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (zxcoop){
clearTimeout(zxcoop.to);
if (zxcoop.data[1]==zxcsrt&&zxcoop.data[2]==zxcfin) zxcoop.update([zxcoop.data[0],zxcsrt],zxctime);
else zxcoop.update([zxcsrt,zxcfin],zxctime);
}
else zxcobj[zxcmde.replace('-','')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,[zxcsrt,zxcfin],zxctime);
}
function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrtfin,zxctime){
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
this.to=null;
this.obj=zxcobj;
this.mde=zxcmde;
this.update(zxcsrtfin,zxctime);
}
zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
this.time=zxctime||this.time||2000;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
this.srttime=new Date().getTime();
this.cng();
}
zxcBAnimatorOOP.prototype.cng=function(){
var zxcms=new Date().getTime()-this.srttime;
this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else this.opacity(this.data[0]);
if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
else {
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[2]+'px';
else this.opacity(this.data[2]);
}
}
zxcBAnimatorOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100){ return; }
this.obj.style.filter='alpha(opacity='+zxcopc+')';
this.obj.style.opacity=this.obj.style.MozOpacity=this.obj.style.KhtmlOpacity=zxcopc/100-.001;
}
/*]]>*/
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function zxcFade(zxcp,zxcnu,zxcspd,zxcmseout){
zxcspd=zxcspd||1000;
zxcp=document.getElementById(zxcp);
var zxcimgs=zxcp.getElementsByTagName('IMG');
if (!zxcp.fade){
for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){
if (zxc0<zxcimgs.length-1) zxcBAnimator('opacity',zxcimgs[zxc0],10,0,10);
}
zxcp.fade=true;
}
if (zxcp.lst&&zxcp.lst!=zxcimgs[zxcnu]){
zxcp.lst.style.zIndex='1';
zxcBAnimator('opacity',zxcp.lst,zxcoop.data[0],0,zxcspd);
}
zxcimgs[zxcnu].style.zIndex=(zxcmseout)?'1':'2';
zxcBAnimator('opacity',zxcimgs[zxcnu],zxcimgs[zxcnu]['opacityoop'].data[0],(zxcmseout)?0:100,zxcspd);
}
/*]]>*/
</script>
</head>
<body>
<div id="head">
<ul class="menu">
<li class="homeS" id="selected">
<a href="#" >home</a>
</li>
<li class="services">
<a onmouseover="zxcFade('tst',0,1000);" onmouseout="zxcFade('tst',0,1000,true);" href="#">home</a>
</li>
<li class="portfolio">
<a onmouseover="zxcFade('tst',1,1000);" onmouseout="zxcFade('tst',1,1000,true);" href="#">home</a>
</li>
<li class="contact">
<a onmouseover="zxcFade('tst',2,1000);" onmouseout="zxcFade('tst',2,1000,true);" href="#">contact</a>
</li>
</ul>
</div>
http://www.webdeveloper.com/forum/showthread.php?t=167871
<div id="tst" style="position:relative;width:785px,height:175px;" title="Jaks Web Design">
<img src="http://www.bh-wbpastoralcharge.net/jaks/images/headerRed.jpg" />
<img src="http://www.bh-wbpastoralcharge.net/jaks/images/headerGreen.jpg" />
<img src="http://www.bh-wbpastoralcharge.net/jaks/images/headerYellow.jpg" />
<img src="http://www.bh-wbpastoralcharge.net/jaks/images/headerBlue.jpg" />
</div>
</body>
</html>[/CODE][CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst img {
position:absolute;left:0px;top:0px;width:785px;height:175px;
}
/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (02-December- 2007) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk
// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// **** Application Notes
// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//
// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
// where:
// parameter 0 = 'left', 'top', 'width', 'height'. (string)
// Note: the first character after the hyphen must be upper case, all others lower case.
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 3 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
//
// Note 1: The function may be re-executed with a different set of parameters (start/finish time or period)
// whenever required, say from an onclick/mouseover/out event.
// The period parameter will be retained unless re-specified.
// Note 2: Sucessive calls with the same start and finish parameters will result in a 'toggle'.
//
// **** Advanced Applications
//
// It may be required to access the current value of the effect.
// The element effect is accessible from the element property
// element effect = elementobject[mode.replace('-','')+'oop'];
// where mode is parameter 0 of the initial call.
// An array storing the current, start and finish values of the element effect may be accessed
// from the element effect.data as fields 0, 1 and 2 respectively
//
// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//
// **** Functional Code - NO NEED to Change
function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (zxcoop){
clearTimeout(zxcoop.to);
if (zxcoop.data[1]==zxcsrt&&zxcoop.data[2]==zxcfin) zxcoop.update([zxcoop.data[0],zxcsrt],zxctime);
else zxcoop.update([zxcsrt,zxcfin],zxctime);
}
else zxcobj[zxcmde.replace('-','')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,[zxcsrt,zxcfin],zxctime);
}
function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrtfin,zxctime){
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
this.to=null;
this.obj=zxcobj;
this.mde=zxcmde;
this.update(zxcsrtfin,zxctime);
}
zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
this.time=zxctime||this.time||2000;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
this.srttime=new Date().getTime();
this.cng();
}
zxcBAnimatorOOP.prototype.cng=function(){
var zxcms=new Date().getTime()-this.srttime;
this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else this.opacity(this.data[0]);
if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
else {
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[2]+'px';
else this.opacity(this.data[2]);
}
}
zxcBAnimatorOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100){ return; }
this.obj.style.filter='alpha(opacity='+zxcopc+')';
this.obj.style.opacity=this.obj.style.MozOpacity=this.obj.style.KhtmlOpacity=zxcopc/100-.001;
}
/*]]>*/
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function zxcFade(zxcp,zxcnu,zxcspd,zxcmseout){
zxcspd=zxcspd||1000;
zxcp=document.getElementById(zxcp);
var zxcimgs=zxcp.getElementsByTagName('IMG');
if (!zxcp.fade){
for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){
if (zxc0<zxcimgs.length-1) zxcBAnimator('opacity',zxcimgs[zxc0],10,0,10);
}
zxcp.fade=true;
}
if (zxcp.lst&&zxcp.lst!=zxcimgs[zxcnu]){
zxcp.lst.style.zIndex='1';
zxcBAnimator('opacity',zxcp.lst,zxcoop.data[0],0,zxcspd);
}
zxcimgs[zxcnu].style.zIndex=(zxcmseout)?'1':'2';
zxcBAnimator('opacity',zxcimgs[zxcnu],zxcimgs[zxcnu]['opacityoop'].data[0],(zxcmseout)?0:100,zxcspd);
}
function Init(show,hide){
var hide=document.getElementById(hide).getElementsByTagName('DIV');
for (var zxc0=0;zxc0<hide.length;zxc0++){
hide[zxc0].style.display='none';
}
document.getElementById(show).style.display='';
}
/*]]>*/
</script>
</head>
<body onload="Init('tst','head');">
<div id="head">
<ul class="menu">
<li class="homeS" id="selected">
<a href="#" >home</a>
<div id="services"><img src="http://www.bh-wbpastoralcharge.net/jaks/images/headerRed.jpg" width="785" height="175" alt="Jaks Web Design" /></div>
</li>
<li class="services">
<a onmouseover="zxcFade('tst',0,1000);" onmouseout="zxcFade('tst',0,1000,true);" href="#">home</a>
</li>
<li class="portfolio">
<a onmouseover="zxcFade('tst',1,1000);" onmouseout="zxcFade('tst',1,1000,true);" href="#">home</a>
</li>
<li class="contact">
<a onmouseover="zxcFade('tst',2,1000);" onmouseout="zxcFade('tst',2,1000,true);" href="#">contact</a>
</li>
</ul>
</div>
http://www.webdeveloper.com/forum/showthread.php?t=167871
<div id="tst" style="position:relative;display:none;width:785px,height:175px;" title="Jaks Web Design">
<img src="http://www.bh-wbpastoralcharge.net/jaks/images/headerRed.jpg" />
<img src="http://www.bh-wbpastoralcharge.net/jaks/images/headerGreen.jpg" />
<img src="http://www.bh-wbpastoralcharge.net/jaks/images/headerYellow.jpg" />
<img src="http://www.bh-wbpastoralcharge.net/jaks/images/headerBlue.jpg" />
</div>
</body>
</html>[/CODE]0.1.9 — BETA 5.18