Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Table Mouse over effect

    I am apologizing in advance for my utter lack of knowledge about javascript.

    i would like a table wide mouse over transparency effect something like this:

    default
    Code:
    filter:gray, alpha(opacity=60) ; opacity:0.6; -moz-opacity:0.6;
    mouse over
    Code:
    filter:gray, alpha(opacity=100) ; opacity:1.0; -moz-opacity:1.0;
    the page
    the top is how i want the default effect to look and the lower would be when the mouse over happens

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <html>
    <title>
    </title>
    <head>
    </head>
    <body onload="zxcEleOpacity('Test1',20,10,100,20);">
    <table id="Test1" border="1" onmouseover="zxcOpacityEvent(event,'Test1',10,100,100,20);" onmouseout="zxcOpacityEvent(event,'Test1',100,10);">
    <tr>
    <td width=200 >R0 C0 </td>
    </tr>
    </table>
    <script language="JavaScript" type="text/javascript">
    <!--
    // 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 <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.
    //
    // Optional Code allows Child Element event bubbles to be cancelled
    
    // 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
    
    // **** 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.
    // <div id="Test1" onmouseover="zxcOpacityEvent(event,'Test1',100,10,100,20);" onmouseout="zxcOpacityEvent(event,'Test1',10,100);"
    // style="position:relative;width:200px;height:150px;background-color:red;" >
    // <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" >
    // </div>
    // 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.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>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // 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=tt_eobj.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
    }
    
    
    //-->
    </script>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    May 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you so very much for the script !!! and your time


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •