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 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2002
    Location
    Central New York
    Posts
    87
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile JavaScript Strobing Rainbow Links

    Good Evening.

    I had this idea to implement on the Kid's Activities page on the website for work and after hours and hours and hours of laboriously slaving over code (yeah, right... more like an hour, most of which was spent formatting and commenting the code) I just had to share it with people.

    Really, it's not that long but it's pretty well documented throughout and adhears to the PHP/PEAR formatting rules so it looks rather spread out. The code itself probably isn't as streamlined as it could be, either... the "?:" operator instead of an IF-THEN statement and the FOR statement instead of WHILE-LOOP help, but there's always extra tweeks that could be made. I wanted to get the idea out there, though.

    I've also posted the code on the cyberdevdigest website at cyberdevdigest.com/code/javascript/rainbow_links.html.

    -Tim

    Code:
     
       <script type='text/javascript'>
       <!--
       // JavaScript code to produce strobing rainbow-colored links
       // on mouseovers. Coded by Timothy Boronczyk,  2003.
    
       // declare list of colors as a global array (goldenrod used 
       // because yellow was too difficult to against lighter 
       // backgrounds)
       var colors = Array('red', 'orange', 'goldenrod', 'green',
                          'blue', 'purple');
    
       // declare color pointer (current color in array by position)
       var p_color = 0;
    
       function strobe(x)
       {
           // set pointer to next color (reset pointer to beginning
           // if current position is at the end of the list)
           p_color = (p_color == 5) ? 0 : p_color + 1;
    
           // set link color
           document.links[x].style.color = colors[p_color];
    
           return true; // no errors
       }
    
       function rainbow(link, toggle)
       {
           // determine which link called this function by matching
           // the current key of the DOM's link array
           for (id = 0; link != document.links[id]; id++);
    
           if (toggle)
           {
               // identify setInterval function by name cycle and 
               // repeatedly call change_color passing current link
               // array key
               cycle = setInterval('strobe(id)', 100);
           }
           else
           {
               // terminate cycle calls
               clearInterval(cycle);
    
               // reset link color (assuming that green was original
               // color)
               link.style.color = 'green';
           }
    
           return true; // no errors
       }
       //-->
       </script>
    call using onmouseover and onmouseout event handlers, such as in this example:
    Code:
      
       <a href='link.html' onmouseover="rainbow(this, 1);"
          onmouseout="rainbow(this, 0);">CLICK HERE</a>
    Timothy Boronczyk

  • #2
    Regular Coder
    Join Date
    Jul 2003
    Location
    New Zealand
    Posts
    435
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    nice work

  • #3
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nice job Tim.
    Moderator @ WebDeveloper.com
    Mentor @ WebXpertz.net

  • #4
    New Coder
    Join Date
    Dec 2002
    Location
    Central New York
    Posts
    87
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks

    -Tim
    Timothy Boronczyk


  •  

    Posting Permissions

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