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 14 of 14
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    BlendTrans (image fade) on mouseover - help!

    Okay, looking at this script http://www.brainerror.net/scripts_js_blendtrans.php. Can anyone tell me how to edit it so I can use it on mouseover for images? That is, have an image start off at 100% opacity, then on hover change it to say 20%, then on mouseout back to 100%. I'm currently using the nereidFade script but I need something that works in Firefox. Thanks in advance.
    Last edited by brendanwor; 08-19-2005 at 01:04 PM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    not 100% but

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Image MouseOver Fade
    // by Vic Phillips (19-08-2005) http://www.vicsjavascripts.org.uk
    
    var zxcSpeed=5;
    var zxcDelay=1000;
    
    
    var zxcIB,zxcIT,zxcLast,zxcLink,zxcCnt,zxcTO;
    var zxcCnt=0;
    var zxcCkOpacity=false;
    
    
    function zxcFadeLink(obj,lk){
     if (obj!=zxcLast&&zxcIT&&zxcCkOpacity){
      zxcCnt=0;
      zxcOpacity(zxcIT,0);
      zxcOpacity(zxcIB,100);
     }
     clearTimeout(zxcTO);
     if (obj.style.MozOpacity||obj.style.opacity||obj.style.filter){
      zxcCkOpacity=true;
     }
     imgs=obj.getElementsByTagName('IMG');
     if (!obj.set){
      obj.set=true;
      zxcIB=imgs[1];
      zxcIT=imgs[0];
     }
     else {
      obj.set=false;
      zxcIB=imgs[0];
      zxcIT=imgs[1];
     }
     zxcIB.style.zIndex=0;
     zxcIT.style.zIndex=1;
     if (zxcOpacity){
      zxcLast=obj;
      zxcFade();
     }
    }
    
    
    function zxcFade(){
     zxcCnt+=zxcSpeed;
     zxcOpacity(zxcIB,100-zxcCnt);
     zxcOpacity(zxcIT,zxcCnt);
     if (zxcCnt<100){ zxcTO=setTimeout("zxcFade()",10); }
     else {
      zxcCnt=0;
      zxcOpacity(zxcIT,100);
      zxcOpacity(zxcIB,0);
     }
    }
    
    
    function zxcOpacity(obj,op) {
     if (obj.style.MozOpacity!=null){ obj.style.MozOpacity=(op/100)-.001; }
     else if (obj.style.opacity!=null){ obj.style.opacity=(op/100)-.001; }
     else if (obj.style.filter!=null){ obj.style.filter = 'alpha(opacity='+op+')';	}
    }
    
    
    //-->
    </script>
    
    </head>
    
    <body>
    <div id=Fred style="position:relative;" onmouseover="zxcFadeLink(this);"  onmouseout="zxcFadeLink(this);">
    <img style="position:absolute;top:0px;left:0px;" width="100" height="50" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif">
    <img style="position:absolute;top:0px;left:0px;" width="100" height="50" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif">
    </div>
    <div id=Tom style="position:relative;top:50px;" onmouseover="zxcFadeLink(this);"  onmouseout="zxcFadeLink(this);">
    <img style="position:absolute;top:0px;left:0px;" width="100" height="50" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif">
    <img style="position:absolute;top:0px;left:0px;" width="100" height="50" src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif">
    </div>
    </body>
    <script> vic=0; </script>
    <form name=Show id=Show style="position:absolute;visibility:visible;top:450px;left:0px;" >
    <input size=10 name=Show1 >
    <input size=10 name=Show2 >
    <input size=10 name=Show3 >
    <input size=10 name=Show4 >
    <input size=10 name=Show5 >
    <input size=10 name=Show6 >
    </form>
    
    </html>

  • #3
    New Coder
    Join Date
    Aug 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, so uh, what exactly would I put inside the <img> tags for this to work? Thanks!

  • #4
    New Coder
    Join Date
    Aug 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bump! Someone help, please!

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    the latest edition

    just copy the code for the exiample buttons changing the first two images to your own, you will need a blank .gif for the third image

    initialised from the <BODY> onload event

    It not finished yet

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Image MouseOver Fade
    // by Vic Phillips (21-08-2005) http://www.vicsjavascripts.org.uk
    
    var zxcSpeed=2;
    var zxcDelay=10;
    
    
    var zxcIB,zxcIT,zxcTO;
    var zxcCkOpacity=false;
    var zxcFAry=new Array();
    
    function zxcInitiliseFade(obj){
     zxcargs=zxcInitiliseFade.arguments;
     for (zxc0=0;zxc0<zxcargs.length;zxc0++){
      zxcpobj=document.getElementById(zxcargs[zxc0]);
      zxcimgs=zxcpobj.getElementsByTagName('IMG');
      if (zxcimgs.length==3){
       if (zxcimgs[0].style.MozOpacity||zxcimgs[0].style.opacity||zxcimgs[0].style.filter){
        zxcCkOpacity=true;
       }
       for (zxc1=0;zxc1<zxcimgs.length;zxc1++){
        zxcs=zxcimgs[zxc1].style;
        zxcs.position='absolute';
        zxcs.zIndex=zxc1;
        zxcs.left='0px';
        zxcs.top='0px';
        zxcs.width=zxcpobj.style.width;
        zxcs.height=zxcpobj.style.height;
       }
       if (zxcCkOpacity){
        zxcOpacity(zxcimgs[0],0);
        zxcOpacity(zxcimgs[1],100);
       }
       zxcimgs[2].style.zIndex=10;
       zxcimgs[2].onmouseover=function(){ zxcFade(this); }
       zxcimgs[2].onmouseout=function(){ zxcFade(this); }
      }
     }
    }
    
    function zxcFade(zxcobj){
     zxcimgs=zxcobj.parentNode.getElementsByTagName('IMG');
     if (!zxcobj.ary){
      zxcFAry[zxcFAry.length]=zxcobj;
      zxcobj.ary=true;
      zxcobj.cnt=0
     }
     if (!zxcobj.set){
      zxcobj.set=true;
      zxcobj.IB=zxcimgs[1];
      zxcobj.IT=zxcimgs[0];
     }
     else {
      zxcobj.set=false;
      zxcobj.IB=zxcimgs[0];
      zxcobj.IT=zxcimgs[1];
     }
     if (zxcOpacity&&!zxcTO){
      zxcFadeDo();
     }
     else {
      zxcobj.IB.style.zIndex=0;
      zxcobj.IT.style.zIndex=1;
     }
    }
    
    
    function zxcFadeDo(){
     for (zxc0=0;zxc0<zxcFAry.length;zxc0++){
      zxcfobj=zxcFAry[zxc0];
      if (zxcfobj.cnt>=100&&zxcfobj.ary){
       zxcOpacity(zxcfobj.IT,100);
       zxcOpacity(zxcfobj.IB,0);
       zxcfobj.ary=false;
       for (zxc1=zxc0;zxc1<zxcFAry.length-1;zxc1++){
        zxcFAry[zxc1]=zxcFAry[zxc1+1];
       }
       zxcFAry.length--;
       zxcfobj.cnt=0;
      }
      else if (zxcfobj.cnt<=100){
       zxcOpacity(zxcfobj.IB,100-zxcfobj.cnt);
       zxcOpacity(zxcfobj.IT,zxcfobj.cnt);
       zxcfobj.cnt+=zxcSpeed;
      }
     }
     if (zxcFAry.length>0){ zxcTO=setTimeout("zxcFadeDo()",zxcDelay); }
     else { zxcTO=null; }
    }
    
    
    function zxcOpacity(obj,op) {
     if (obj.style.MozOpacity!=null){ obj.style.MozOpacity=(op/100)-.001; }
     else if (obj.style.opacity!=null){ obj.style.opacity=(op/100)-.001; }
     else if (obj.style.filter!=null){ obj.style.filter = 'alpha(opacity='+op+')';	}
    }
    
    
    //-->
    </script>
    
    </head>
    
    <body onload="zxcInitiliseFade('Fred','Tom','Joe');">
    <div id="Fred" style="position:relative;width:100px;height:50px;" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >
    <div style="position:absolute;left:0px;top:15px;z-Index:3;width:100px;text-align:center;color:white;font-weight:bold;font-size:16px;" >Button 1</div>
    <div style="position:absolute;left:1px;top:16px;z-Index:4;width:100px;text-align:center;color:gray;font-weight:bold;font-size:16px;" >Button 1</div>
    </div>
    
    <div id="Tom" style="position:relative;top:0px;width:100px;height:50px;">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >
    <div style="position:absolute;left:0px;top:15px;z-Index:3;width:100px;text-align:center;color:white;font-weight:bold;font-size:16px;" >Button 2</div>
    <div style="position:absolute;left:1px;top:16px;z-Index:4;width:100px;text-align:center;color:gray;font-weight:bold;font-size:16px;" >Button 2</div>
    </div>
    <div id="Joe" style="position:relative;top:0px;width:100px;height:50px;">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >
    <div style="position:absolute;left:0px;top:15px;z-Index:3;width:100px;text-align:center;color:white;font-weight:bold;font-size:16px;" >Button 3</div>
    <div style="position:absolute;left:1px;top:16px;z-Index:4;width:100px;text-align:center;color:gray;font-weight:bold;font-size:16px;" >Button 3</div>
    </div>
    </body>
    
    
    </html>

  • #6
    New Coder
    Join Date
    Aug 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not actually trying to get the image to fade into another though, I just want the single image to fade on mouseover, then unfade on mouseout. Same as what this script does:

    <!--
    nereidFadeObjects = new Object();
    nereidFadeTimers = new Object();

    /* object - image to be faded (actual object, not name);
    * destop - destination transparency level (ie 80, for mostly solid)
    * rate - time in milliseconds between trasparency changes (best under 100)
    * delta - amount of change each time (ie 5, for 5% change in transparency)
    */

    function nereidFade(object, destOp, rate, delta){
    if (!document.all)
    return
    if (object != "[object]"){ //do this so I can take a string too
    setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
    return;
    }

    clearTimeout(nereidFadeTimers[object.sourceIndex]);

    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
    direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;

    if (object.filters.alpha.opacity != destOp){
    nereidFadeObjects[object.sourceIndex]=object;
    nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
    }

    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    -->

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    make the mouse over image a Blank.gif

  • #8
    New Coder
    Join Date
    Aug 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers man. One other question, how would I edit it so that instead of starting at 0% opacity, fading in, then fading back out to 0%, it starts at 100% opacity, then fades out on mouseover, then fades back in? Thanks!

    PS - And how would I change the starting opacity for the image?
    Last edited by brendanwor; 08-22-2005 at 11:04 AM.

  • #9
    New Coder
    Join Date
    Aug 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone?

  • #10
    New Coder
    Join Date
    Aug 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bump!

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    sorry missed this one - back in a while

    while the script is more complex than you require its just a matter of making one of the images a blank image but I may make a simple version.
    Code:
    <!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="zxfInitFadeMseOver('Fred');" >
    how would I edit it so that instead of starting at 0% opacity, fading in,<br>
    then fading back out to 0%, it starts at 100% opacity,<br>
    then fades out on mouseover, then fades back in? Thanks!
    <br>
    <div id="Fred" style="position:relative;width:100px;height:50px;" >
    <img class="zxcIStyle"src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif">
    <img class="zxcIStyle"src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif">
    <img class="zxcIStyle"src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >
    <div style="position:absolute;left:0px;top:15px;z-Index:3;width:100px;text-align:center;color:white;font-weight:bold;font-size:16px;" >Button 1</div>
    <div style="position:absolute;left:1px;top:16px;z-Index:4;width:100px;text-align:center;color:gray;font-weight:bold;font-size:16px;" >Button 1</div>
    </div>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Image MouseOver Fade
    // by Vic Phillips (19-08-2005) http://www.vicsjavascripts.org.uk
    
    var zxfSpeed=1;
    var zxfDelay=50;
    
    
    var zxfD,zxfDownTO,zxfUpTO;
    var zxfUpAry=new Array();
    var zxfDoAry=new Array();
    var zxfCkOpacity=false;
    
    function zxfInitFadeMseOver(){
     zxfargs=zxfInitFadeMseOver.arguments;
     for (zxf0=0;zxf0<zxfargs.length;zxf0++){
      zxfpobj=document.getElementById(zxfargs[zxf0]);
      zxfimgs=zxfpobj.getElementsByTagName('IMG');
      if (zxfimgs.length==3){
       for (zxf1=0;zxf1<zxfimgs.length;zxf1++){
        zxfs=zxfimgs[zxf1].style;
        zxfs.position='absolute';
        zxfs.zIndex=zxf1;
        zxfs.left='0px';
        zxfs.top='0px';
        zxfs.width=zxfpobj.style.width;
        zxfs.height=zxfpobj.style.height;
       }
       if (zxfimgs[2].style.MozOpacity!=null||zxfimgs[2].style.opacity!=null||zxfimgs[2].style.filter!=null){
        zxfCkOpacity=true;
        zxfOpacity(zxfimgs[0],0);
        zxfOpacity(zxfimgs[1],100);
       }
       zxfimgs[2].style.zIndex=10;
       zxfimgs[2].cnt=0;
       zxfimgs[2].IT=zxfimgs[1];
       zxfimgs[2].IB=zxfimgs[0];
       zxfimgs[2].onmouseover=function(){ zxfFade(this,true); }
       zxfimgs[2].onmouseout=function(){ zxfFade(this,false); }
      }
     }
    }
    
    function zxfFade(zxfobj,zxfdir){
     if (!zxfCkOpacity){
      if (zxfobj.IT.style.zIndex){
       zxfobj.IT.style.zIndex=0;
       zxfobj.IB.style.zIndex=1;
      }
      else {
       zxfobj.IT.style.zIndex=1;
       zxfobj.IB.style.zIndex=0;
      }
      return;
     }
     zxfD=zxfobj;
     if (!zxfD.udir){
      zxfD.h=0;
      zxfD.udir='x';
      zxfD.ddir='x';
      zxfUpAry[zxfUpAry.length]=zxfD;
      zxfDoAry[zxfDoAry.length]=zxfD;
     }
     if (zxfdir){
       zxfD.ddir='x';
       zxfD.udir='u';
       if (!zxfUpTO){ zxfUp(); }
     }
     else {
      zxfD.udir='x';
      zxfD.ddir='d';
      if (!zxfDownTO){ zxfDown(); }
     }
    }
    
    function zxfDown(){
     zxfrund=false;
     for (zxf0=0;zxf0<zxfUpAry.length;zxf0++){
      if (zxfUpAry[zxf0].ddir=='d'){
       zxfUpAry[zxf0].ddir='x';
       zxfDoAry[zxf0].cnt-=zxfSpeed;
       zxfOpacity(zxfDoAry[zxf0].IT,100-zxfDoAry[zxf0].cnt);
       zxfOpacity(zxfDoAry[zxf0].IB,zxfDoAry[zxf0].cnt);
       if (zxfDoAry[zxf0].cnt>0){
        zxfrund=true;
        zxfUpAry[zxf0].ddir='d';
       }
      }
     }
     if (zxfrund){ zxfDownTO=setTimeout('zxfDown()',zxfDelay); }
     else { zxfDownTO=null; }
    }
    
    function zxfUp(){
     zxfrunu=false;
     for (zxf0=0;zxf0<zxfDoAry.length;zxf0++){
      if (zxfDoAry[zxf0].udir=='u'){
       zxfDoAry[zxf0].udir='x';
       zxfDoAry[zxf0].cnt+=zxfSpeed;
       zxfOpacity(zxfDoAry[zxf0].IT,100-zxfDoAry[zxf0].cnt);
       zxfOpacity(zxfDoAry[zxf0].IB,zxfDoAry[zxf0].cnt);
       if (zxfDoAry[zxf0].cnt<100){
        zxfrunu=true;
        zxfDoAry[zxf0].udir='u';
       }
       else {
        zxfDoAry[zxf0].udir='y';
        zxfDoAry[zxf0].style.display="none";
       }
      }
     }
     if (zxfrunu){ zxfUpTO=setTimeout('zxfUp()',zxfDelay); }
     else { zxfUpTO=null; }
    }
    
    function zxfOpacity(zxfobj,zxfop) {
     if (zxfop>100||zxfop<0){ return }
     if (zxfobj.style.MozOpacity!=null){ zxfobj.style.MozOpacity=(zxfop/100)-.001; }
     else if (zxfobj.style.opacity!=null){ zxfobj.style.opacity=(zxfop/100)-.001; }
     else if (zxfobj.style.filter!=null){ zxfobj.style.filter = 'alpha(opacity='+zxfop+')';	}
    }
    
    //-->
    </script>
    
    </body>
    
    </html>
    simple version
    Code:
    <!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="zxfInitFadeMseOver('Fred','Tom');" >
    how would I edit it so that instead of starting at 0% opacity, fading in,<br>
    then fading back out to 0%, it starts at 100% opacity,<br>
    then fades out on mouseover, then fades back in? Thanks!
    <br>
    <div id="Fred" style="position:relative;width:100px;height:50px;" >
    <img class="zxcIStyle"src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif">
    </div>
    <div id="Tom" style="position:relative;width:100px;height:50px;" >
    <img class="zxcIStyle"src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif">
    </div>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Image MouseOver Fade
    // by Vic Phillips (19-08-2005) http://www.vicsjavascripts.org.uk
    
    var zxfSpeed=1;
    var zxfDelay=50;
    
    
    var zxfD,zxfDownTO,zxfUpTO;
    var zxfUpAry=new Array();
    var zxfDoAry=new Array();
    var zxfCkOpacity=false;
    
    function zxfInitFadeMseOver(){
     zxfargs=zxfInitFadeMseOver.arguments;
     for (zxf0=0;zxf0<zxfargs.length;zxf0++){
      zxfpobj=document.getElementById(zxfargs[zxf0]);
      zxfimgs=zxfpobj.getElementsByTagName('IMG');
      zxfimgs[0].style.position='absolute';
      zxfimgs[0].style.visibility='visible';
      zxfimgs[0].style.left='0px';
      zxfimgs[0].style.top='0px';
      zxfimgs[0].style.width=zxfpobj.style.width;
      zxfimgs[0].style.height=zxfpobj.style.height;
      if (zxfimgs[0].style.MozOpacity!=null||zxfimgs[0].style.opacity!=null||zxfimgs[0].style.filter!=null){
       zxfCkOpacity=true;
       zxfOpacity(zxfimgs[0],100);
      }
      zxfimgs[0].cnt=99;
      zxfimgs[0].IB=zxfimgs[0];
      zxfpobj.img=zxfimgs[0];
      zxfpobj.onmouseover=function(){ zxfFade(this.img,true); }
      zxfpobj.onmouseout=function(){ zxfFade(this.img,false); }
     }
    }
    
    function zxfFade(zxfobj,zxfdir){
     if (!zxfCkOpacity){
      if (zxfobj.IB.style.visibility=='visible'){
       zxfobj.IB.style.visibility='hidden';
      }
      else {
       zxfobj.IB.style.visibility='visible';
      }
      return;
     }
     zxfD=zxfobj;
     if (!zxfD.udir){
      zxfD.udir='x';
      zxfD.ddir='x';
      zxfUpAry[zxfUpAry.length]=zxfD;
      zxfDoAry[zxfDoAry.length]=zxfD;
     }
     if (!zxfdir){
       zxfD.ddir='x';
       zxfD.udir='u';
       if (!zxfUpTO){ zxfUp(); }
     }
     else {
      zxfD.udir='x';
      zxfD.ddir='d';
      if (!zxfDownTO){ zxfDown(); }
     }
    }
    
    function zxfDown(){
    document.Show.Show1.value=zxfUpAry[0].cnt;
     zxfrund=false;
     for (zxf0=0;zxf0<zxfUpAry.length;zxf0++){
      if (zxfUpAry[zxf0].ddir=='d'){
       zxfUpAry[zxf0].ddir='x';
       zxfDoAry[zxf0].cnt-=zxfSpeed;
       zxfOpacity(zxfDoAry[zxf0].IB,zxfDoAry[zxf0].cnt);
       if (zxfDoAry[zxf0].cnt>0){
        zxfrund=true;
        zxfUpAry[zxf0].ddir='d';
       }
      }
     }
     if (zxfrund){ zxfDownTO=setTimeout('zxfDown()',zxfDelay); }
     else { zxfDownTO=null; }
    }
    
    function zxfUp(){
    document.Show.Show2.value=zxfDoAry[0].cnt;
     zxfrunu=false;
     for (zxf0=0;zxf0<zxfDoAry.length;zxf0++){
      if (zxfDoAry[zxf0].udir=='u'){
       zxfDoAry[zxf0].udir='x';
       zxfDoAry[zxf0].cnt+=zxfSpeed;
       zxfOpacity(zxfDoAry[zxf0].IB,zxfDoAry[zxf0].cnt);
       if (zxfDoAry[zxf0].cnt<100){
        zxfrunu=true;
        zxfDoAry[zxf0].udir='u';
       }
       else {
        zxfDoAry[zxf0].udir='y';
       }
      }
     }
     if (zxfrunu){ zxfUpTO=setTimeout('zxfUp()',zxfDelay); }
     else { zxfUpTO=null; }
    }
    
    function zxfOpacity(zxfobj,zxfop) {
     if (zxfop>100||zxfop<0){ return }
     if (zxfobj.style.MozOpacity!=null){ zxfobj.style.MozOpacity=(zxfop/100)-.001; }
     else if (zxfobj.style.opacity!=null){ zxfobj.style.opacity=(zxfop/100)-.001; }
     else if (zxfobj.style.filter!=null){ zxfobj.style.filter = 'alpha(opacity='+zxfop+')';	}
    }
    
    //-->
    </script>
    <script> vic=0; </script>
    <form name=Show id=Show style="position:absolute;visibility:visible;top:450px;left:0px;" >
    <input size=10 name=Show1 >
    <input size=10 name=Show2 >
    <input size=10 name=Show3 >
    <input size=10 name=Show4 >
    <input size=10 name=Show5 >
    <input size=10 name=Show6 >
    </form>
    
    </body>
    
    </html>
    Last edited by vwphillips; 08-29-2005 at 10:42 AM.

  • #12
    New Coder
    Join Date
    Aug 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks - the simple script is pretty much exactly what I need!
    Last edited by brendanwor; 08-30-2005 at 02:01 AM.

  • #13
    New Coder
    Join Date
    Aug 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Edit - never mind, fixed it!
    Last edited by brendanwor; 08-31-2005 at 12:54 AM.

  • #14
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making one Black and White

    Hi guys, this script is awesome.. I have one question: instead of fading from colour, to transparent, to colour, I'm wondering if there's a way to fade the picture from black and white, to colour (on hover), to black and white. I could easily change the script to do that for me, but ideally I would like to only use ONE picture, not two. (I don't want to upload a black and white version of the picture)

    If you guys can help me out with that I would love it!

    Thanks.


  •  

    Posting Permissions

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