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
    Jun 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need background fade reversed

    Alright I give up! I'm not the type that easily asks for help but I just spent an ungodly amount of time trying to figure this out. This script fades a web pages background when you mouseover a graphic. The problem I'm having is it goes from white to black and I need it to go from black to white. I was able to reverse it like I wanted but the page still initially starts off white instead of black. Setting the pages background to black doesn't fix the problem either. I imagine its easy enough to do but JavaScript is not my forte. Any help would be very much appreciated.

    Code:
    <HTML>
    <HEAD>
    
    <script language="JavaScript">
    
    <!--
    
            hexa = new Array(16);
            for(var i = 0; i < 10; i++)
                    hexa[i] = i;
            hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
            hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
    
            function hex(i) 
            {
                    if (i < 0)
                            return "00";
                    else if (i > 255)
                            return "ff";
                    else
                            return "" + hexa[Math.floor(i/16)] + hexa[i%16];
            }
    
            function setbgColor(r, g, b) 
            {
                    document.bgColor = "#"+hex(r)+hex(g)+hex(b);
            }
            
            // 1 -- white --> black
            // -1 -- black --> white
            var inc = 1;
            var cur_i = 20;
            var max_step = 20;
            var in_progress = false;
            
            function msover()
            {
                    inc = -1;
                    if( !in_progress )
                            step();
            }
    
            function msout()
            {
                    inc = 1;
                    if( !in_progress )
                            step();
            }
            
            function step()
            {		
            	//	alert(document.bgColor);
                    setbgColor( Math.floor(255 * cur_i / max_step),
                                    Math.floor(255 * cur_i / max_step),
                                    Math.floor(255 * cur_i /max_step) );
               //    alert("2:" + document.bgColor);
                    cur_i += inc;
                    if( (inc > 0 && cur_i > max_step) || (inc < 0 && cur_i < 0) )
                    {
                            cur_i -= inc;
                            inc = -inc;
                            in_progress = false;
                    }
                    else
                    {
                            in_progress = true;
                            setTimeout("step()", 3);
                    }
            }
            
    // -->
    
    </script>
    
    
    
    
    </HEAD>
    
    
    <BODY TEXT="#888888" LINK="#1b1b1b" VLINK="#1b1b1b" ALINK="#1b1b1b" bgcolor="white"> 
    
    <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    <CENTER><a href="example.com" onMouseOver="msover()" 
            onMouseOut="msout()"><IMG SRC="example.gif" border=0></A></CENTER>
    
    
    </HTML>
    Last edited by Exeon; 06-03-2011 at 12:03 PM.

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    in msover and msout there are a the lines inc =-1; and and inc = 1;
    these value determine in which direction the colorchange should go.

    Code:
            function msover()
            {
                    inc = -1;
                    if( !in_progress )
                            step();
            }
    here inc = -1 means "go from white to black"

    Code:
            function msout()
            {
                    inc = 1;
                    if( !in_progress )
                            step();
            }
    here inc = 1 means "go from black to white"

    negate these values.
    set the body's bgcolor to "black"

    and change var cur_i = 20; to var cur_i = 0;

  • Users who have thanked Lerura for this post:

    Exeon (06-04-2011)

  • #3
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I got as far as figuring out almost all of that. Changing var cur_i = 20; to var cur_i = 0; was the piece of the puzzle I was missing.

    Thanks again!


  •  

    Posting Permissions

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