JavaScript Strobing Rainbow Links

[bluephoenix]

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

 
   <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:

  
   <a href='link.html' onmouseover="rainbow(this, 1);"
      onmouseout="rainbow(this, 0);">CLICK HERE</a>

[Scrowler]

nice work

[fredmv]

Nice job Tim.

[bluephoenix]

Thanks

-Tim