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 10 of 10
  1. #1
    New Coder
    Join Date
    May 2005
    Location
    Alabama
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Link mouseover effect with JS

    I'm trying to do a "mouseover" effect on a link. When you put your mouse over the link it has an effect of "fading in" (the background color gets darker and darker every time). When you put your mouse out, it is supposed to turn the background white and then when you put it over again it will have the same fading in effect.

    In My script I already got the part of when you put your mouse over it and then put it out, but I can't get it to do the same effect when you put your mouse over it AGAIN. Any suggestions?

    Here's the code:

    Code:
    <script language="JavaScript"> 
    <!-- 
    var thenumber = 0;
    var backnumber = 5;
    var thecolors = new Array("#C1DAFF","#77ADFF","#3787FF","#004EC1","#0062F4", "white");
    function fadeColor(which) 
    { 
         
        if(thenumber<4) 
        { 
            document.anchors(which).style.backgroundColor = thecolors[thenumber]; 
            thenumber+=1;
        }
    setTimeout('fadeColor()', 50); 
    } 
    
    function fadeBack(which)
    {
      document.anchors(which).style.backgroundColor = "white";
      }
       
    //--> 
    </script> 
    </head> 
    <body> 
    <a href="navigation.html" name="ellink" onmouseover="fadeColor('ellink')" onmouseout="fadeBack('ellink')">Link</a>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    PHP 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">
    <!--
    var 
    thenumber 0;
    var 
    backnumber 5;
    var 
    thecolors = new Array("#C1DAFF","#77ADFF","#3787FF","#004EC1","#0062F4""white");
    var 
    TO;

    function 
    fadeColor(which)
    {

        if(
    thenumber<4)
        {
            
    document.anchors(which).style.backgroundColor thecolors[thenumber];
            
    thenumber+=1;
        }
     
    TO=setTimeout('fadeColor()'50);
    }
    function 
    fadeBack(which)
    {
      
    document.anchors(which).style.backgroundColor "white";
      
    clearTimeout(TO);
      
    thenumber 0;
      }

    //-->
    </script>
    </head>
    <body>
    <a href="navigation.html" name="ellink" onmouseover="fadeColor('ellink')" onmouseout="fadeBack('ellink')">Link</a>
    </body>

    </html> 

  • #3
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Dude, that's a cool Javascript! Makes things look a little less basic

  • #4
    New Coder
    Join Date
    May 2005
    Location
    Alabama
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, i really appreciate it, didn't think about that at all

  • #5
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK,

    the posted code didn't work in FireFox when i tested it (didn't work in IE for that matter )

    So, I revamped it for you. Should also be a little more efficient.



    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">
    <!--
    var thenumber = 0;
    var thecolors = new Array("#C1DAFF","#77ADFF","#3787FF","#004EC1","#0062F4", "#FFFFFF");
    var TO;
    function fadeColor(id)
    {
    
        if(thenumber<=(thecolors.length-1))
        {
    		var doc = document.getElementById(id);
            doc.style.backgroundColor = thecolors[thenumber];
            thenumber++;
        }
     TO=setTimeout('fadeColor("'+id+'")', 50);
    }
    function fadeBack(id)
    {
      var doc = document.getElementById(id);
      doc.style.backgroundColor = thecolors[(thecolors.length-1)];
      clearTimeout(TO);
      thenumber = 0;
      }
    
    //-->
    </script>
    </head>
    <body>
    <a href="navigation.html" id="ellink" onmouseover="fadeColor(this.id)" onmouseout="fadeBack(this.id)">Link</a>
    <a href="navigation.html" id="ellink2" onmouseover="fadeColor(this.id)" onmouseout="fadeBack(this.id)">Link</a>
    <a href="navigation.html" id="ellink3" onmouseover="fadeColor(this.id)" onmouseout="fadeBack(this.id)">Link</a>
    
    
    </body>
    
    </html>
    Last edited by rlemon; 05-26-2005 at 09:50 PM.
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #6
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ohh and the code i just posted works in IE, Mozilla, and FireFox
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #7
    New Coder
    Join Date
    May 2005
    Location
    Alabama
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, it worked just fine with one link but when i try to add another link to the page with the same function it gets kind of messed up.

    this is what i was trying to do:

    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">
    <!--
    var thenumber = 0;
    var thecolors = new Array("#C1DAFF","#77ADFF","#3787FF","#004EC1","#0062F4");
    var TO;
    
    function fadeColor(which)
    {
    
        if(thenumber<=thecolors.length)
        {
            document.anchors(which).style.backgroundColor = thecolors[thenumber];
            thenumber+=1;
        }
     TO=setTimeout('fadeColor()', 50);
    }
    function fadeBack(which)
    {
      document.anchors(which).style.backgroundColor = "white";
      clearTimeout(TO);
      thenumber = 0;
      }
    
    //-->
    </script>
    </head>
    <body>
    <a href="navigation.html" name="ellink" onmouseover="fadeColor('ellink');" onmouseout="fadeBack('ellink');">Link</a>
    <a href="navigation2.html" name="ellink2" onmouseover="fadeColor('ellink2');" onmouseout="fadeBack('ellink2');">Link2</a>
    </body>
    
    </html>

  • #8
    New Coder
    Join Date
    May 2005
    Location
    Alabama
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Never mind about what i said, me and you posted our messages at the same time.... thanks really appreciate it. And thanks vapor i guess i got a lot of imagination but just don't know how to code my thoughts...

  • #9
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, well what you posted above (code) isn't correct.

    just so we are clear

    JAVASCRIPT:: (within the <head> tags) ::
    Code:
    <script language="JavaScript">
    <!--
    var thenumber = 0;
    var thecolors = new Array("#C1DAFF","#77ADFF","#3787FF","#004EC1","#0062F4", "#FFFFFF");
    var TO;
    function fadeColor(id)
    {
    
        if(thenumber<=(thecolors.length-1))
        {
    		var doc = document.getElementById(id);
            doc.style.backgroundColor = thecolors[thenumber];
            thenumber++;
        }
     TO=setTimeout('fadeColor("'+id+'")', 50);
    }
    function fadeBack(id)
    {
      var doc = document.getElementById(id);
      doc.style.backgroundColor = thecolors[(thecolors.length-1)];
      clearTimeout(TO);
      thenumber = 0;
      }
    
    //-->
    </script>
    HTML :: (within the <body> tags) ::
    Code:
    <a href="page1.html" id="link1" onmouseover="fadeColor(this.id)" onmouseout="fadeBack(this.id)">Link1</a>
    then,
    to make another link you only need to change what is highlighted in red:

    <a href="page1.html" id="link1" onmouseover="fadeColor(this.id)" onmouseout="fadeBack(this.id)">Link1</a>

    and there you go!
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #10
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Thanks for fixing that last little bug. Much better!


  •  

    Posting Permissions

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