JeffEmminger.com

Link Fader

top

What is it?

Link Fader allows you to turn ordinary hyperlinks into color-fading ones!

top

Demo

Roll over the Nav Menu at left to see the links fade from yellow to blue.

top

Download/Install

  1. To use, download the LinkFader.js file here, and include in your page.
  2. There are four optional configuration arguments to the setup function faderInit(targetColor, step, delay, attachAll):
    • targetColor, the color your links will fade to onmouseover. This may be expressed as a three element array of RGB values, e.g. [255,0,0] or as a hex string, e.g. "#ff0000"
      If not specified, defaults to [255,0,0]
    • step, how much the current moused over link's color will change with each update, using RGB color values (0 - 255)
      If not specified, defaults to 15.
    • delay, how often (in milliseconds) LinkFader will update the current link color until it reaches targetColor.
      If not specified, defaults to 10.
    • attachAll, if LinkFader should attach to every hyperlink, or just those with a class attribute of "link_fader".
      If not specified, defaults to false.
  3. Default configuration: Add the default setup function:
    <script type="text/javascript">
    window.onload = faderInit;
    </script>
    or
    <body onload="faderInit();">
    to your page.
  4. Custom configuration: Add your own parameters, e.g.
    <script type="text/javascript">
    // rgb setup
    window.onload = function() { faderInit( [0,255,255], 8, 15 ); };
    // hex setup
    window.onload = function() { faderInit( "#00ffff", 8, 15 ); };
    </script>
    or
    <!-- rgb setup -->
    <body onload="faderInit([0,255,255], 8, 15);">
    <!-- hex setup -->
    <body onload="faderInit('#00ffff', 8, 15);">
    to your page.
  5. If you have not set "attachAll" to true, then add the class attribute "link_fader" to any hyperlink that you want to fade, e.g.
    <a href="link.html" class="link_fader">link</a>

    If your links already have a class assigned, don't worry - multiple css class attributes are allowed; just separate them with a space:
    <a href="link.html" class="foo bar link_fader">link</a>

    Note: the "link_fader" class does not need to be defined in a stylesheet anywhere for LinkFader to work, but you certainly can add it to your styles if you wish to change every LinkFader link's appearance.
  6. Done!