// JavaScript Document //End Toggle/Hide or Visible Script // Element Opacity Part 1 (27-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

) // The initial opacity may be established from a 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. // // Optional Code allows Child Element event bubbles to be cancelled // Application Notes // **** Initialising the Opacity // The element opacity may established from a or window onload event call // The element must be allocated a unique ID name // e.g. // parameter 0 = unique ID name of the element (string) // parameter 1 = the start opacity value (0 to 100) (digit) // **** Executing the Effect // e.g.

// 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 // **** Optional Code to Cancel Child Element Event Bubbles // // MouseOver or MouseOut of any child node of the element will created false mouse over and mouseout event // the Part 2 Code is required to cancell these events // // The calls are now // e.g. //

//

//

// where: // parameter 0 = the event (event) // parameter 1 = object or unique ID name of the element (object or string) // parameter 2 = the start opacity value (0 to 100) (digit) // parameter 3 = the finish opacity value (0 to 100) (digit) // parameter 4 = (optional) the speed (1 = fast, 500 = slow) (digit) (default 100 milliSec) // parameter 5 = (optional) the number of opacity steps (digit) (default 50) // **** General // // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts // These characters may be changed to characters of choise using global find and replace // // The Functional Code Part 1 (about 2K) and Part 2 (about 1.25) are best as External JavaScripts // // 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.cnt0)){ 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;zxc1zxcsary[3]){ zxctary=zxctary.reverse(); } return zxctary } // Element Opacity Part 2 (27-April-2006) // by Vic Phillips http://www.vicsjavascripts.org.uk // Required MouseOver/Out actuation if the Element has Child Nodes // **** Functional Code - NO NEED to Change function zxcOpacityEvent(zxce,zxcid,zxcsrt,zxcfin,zxcd,zxcstp){ if (zxcCkEventObj(zxce)){ zxcEleOpacity(zxcid,zxcsrt,zxcfin,zxcd,zxcstp); } } function zxcCkEventObj(zxce){ 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=zxceobj.parentNode; var zxcft; if (zxce.type=='mouseout'){ zxcft=zxcEventTo(zxce); } else { zxcft=zxcEventFrom(zxce); } if (zxcft.oop){ return false; } while (zxcft.parentNode){ if (zxcft.oop){ 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 }