/*** (C)2001 Scripterlative.com Info: http://scripterlative.com?linkfade These instructions may be removed but not the above text. Please notify any suspected errors in this text or code, however minor. LinkFade - Fades the background and/or foreground of links and other elements when they are hovered. ** Requires knowledge of HEX notation as used to select RGB colour values ** THIS IS A SUPPORTED SCRIPT ~~~~~~~~~~~~~~~~~~~~~~~~~~ It's in everyone's interest that every download of our code leads to a successful installation. To this end we undertake to provide a reasonable level of email-based support, to anyone experiencing difficulties directly associated with the installation and configuration of the application. Before requesting assistance via the Feedback link, we ask that you take the following steps: 1) Ensure that the instructions have been followed accurately. 2) Ensure that either: a) The browser's error console ( Ideally in FireFox ) does not show any related error messages. b) You notify us of any error messages that you cannot interpret. 3) Validate your document's markup at: http://validator.w3.org or any equivalent site. 4) Provide a URL to a test document that demonstrates the problem. ---- Please read these instructions carefully. Installation ~~~~~~~~~~~~ Save this file as 'linkfade.js' in a suitable folder. Note: Only one copy of the file is required per website, even if the script is used on multiple pages. Insert the following script tags in all relevant HTML documents: IMPORTANT - Place the tags at a point within the BODY section, anywhere *below* the last link or other element to be faded. DO NOT place the tags within the head section. DO NOT nest these tags within any other tags inside (If linkfade.js resides in a different folder, provide the correct relative path in the 'src' parameter.) NOTE: This script will attempt to combine its operation with any other mouseover/mouseout scripts that operate on the same links, provided that it is loaded after any such scripts. Configuration ~~~~~~~~~~~~~ Note: There is no need to create any CSS classes for this script. If multiple elements are to share the same initila and faded colours, they can be initialised as a group by giving them a common class name. If such elements already share a common CSS class with others not to be faded, simply add a second name to the class of each element in the sub-group, and specify that second name when initialising the script as shown in the examples below. Class names used need not necessarily pertain to existing CSS classes. Individual elements also can be identified by their ID attribute. Examples ~~~~~~~~ Go Somewhere Go Somewhere No other configuration is required on elements. Specifying the Colours to be Used for Each Fade ------------------------------------------------ Configuration consists of a single call to the function LinkFade.setup(), passing it a set of five parameters for each element class to be involved in fading. The parameters are: "className or ID", initial foreground, faded foreground, initial background, faded background. Example. A single link with the ID 'feedback' has initial black/yellow foreground/background colours, and when hovered will fade to black/red foreground/background: Example. A document has a set of links whose class name is or includes the word 'mainLinks', whose initial foreground and background colours are white and blue respectively and whose faded fg/bg will be yellow/magenta. The call to LinkFade.setup() with the required parameters would be: Example. To the document above is added a menu whose links have the class name 'menuOptions'. Their background will fade black to red, while the foreground remains white: IMPORTANT - Maintain the exact syntax as used above, with the first parameter in each set within quotes and all parameters followed by commas except the last. The hex notation system is similar to that used with CSS, except that a hex value is denoted by 0x instead of #, and six hex digits must be used. A freeware colour picker program provides an easy way both to read default screen colours, and to choose fade colours. Such an application will allow you to vary the Red/Green/Blue levels and will display the corresponding hex value. To fade only the background colour, leaving the foreground unchanged, give the same value to the initial and faded foregound. The reverse applies for fading only the foreground. Installation Summary ~~~~~~~~~~~~~~~~~~~~ Place linkfade.js in a suitable folder. Add appropriate class names or IDs to all relevant elements in all pages. Decide the required colour values for each fade. Using script tags, include the script in all relevant documents. In each document, pass the required parameter data to LinkFade.setup() Colour Selection Tips ~~~~~~~~~~~~~~~~~~~~~ Fading between some colour combinations can cause a perceived momentary 'dimming' of an element. In general it is better that when more than one red green or blue value is changed, all transitions should all be in the same direction, rather than one or two values increasing and the other decreasing. Ensure that colour choices do not compromise the readability of link text, even temporarily. Troubleshooting ~~~~~~~~~~~~~~~ As always, it is imperative to refer to the browser's JavaScript error console, which will indicate the presence of syntax errors and their approximate location. The most likely source of error will be syntax errors in the parameters passed to LinkFade.setup(). GratuityWare ~~~~~~~~~~~~ This code is supplied on condition that you recognise the effort that went into producing it, by making a PayPal donation OF YOUR CHOICE to the authors. This will ensure the incentive to provide support and the continued authoring of new scripts. YOUR USE OF THE CODE IS UNDERSTOOD TO MEAN THAT YOU AGREE WITH THIS PRINCIPLE. You may donate at www.scripterlative.com, stating the URL to which the donation applies. *** DO NOT EDIT BELOW THIS LINE ***/ var LinkFade=/*2843295374657068656E204368616C6D657273*/ { /*** Free Download with instructions: http://scripterlative.com?linkfade ***/ fadeData:[], fadeInsts:[], bon:0xf&0, logged:0, translator:{ 'black':'#000000', 'cyan':'#008f8f', 'lightcyan':'#008f8f', 'red':'#8f0000', 'lightred':'#ff0000', 'orange':'#ff8000', 'blue':'#008f00', 'lightblue':'#0000ff', 'green':'#008f00', 'lightgreen':'#00ff00', 'magenta':'#8f008f', 'lightmagenta':'#ff00ff', 'brown':'#8f8f00', 'yellow':'#ffff00', 'white':'#ffffff'}, toHexString:function(n) { var retVal='#', v=n.toString(16), l=v.length; while( l++ < 6 ) retVal+='0'; return retVal+=v; }, initData:function(obj, colourData) { this.obj=obj; this.stepDir=-1; this.stepLength=16; this.stepPos=this.stepLength; this.initBg=colourData.initBg; this.bgStartRed=this.initBg>>>16; this.bgStartGreen=(this.initBg>>>8)&0x0000ff; this.bgStartBlue=this.initBg&0x0000FF; this.tbg=colourData.finalBg; this.bgRedStep =((this.tbg>>>16) - this.bgStartRed)/this.stepLength; this.bgGreenStep=(((this.tbg>>>8)&0xff) - this.bgStartGreen)/this.stepLength; this.bgBlueStep =((this.tbg&0xff) - this.bgStartBlue)/this.stepLength; this.newBgColour=0; this.initFg=colourData.initFg; this.fgStartRed=this.initFg>>>16; this.fgStartGreen=(this.initFg>>>8)&0x0000ff; this.fgStartBlue=this.initFg&0x0000FF; this.tfg=colourData.finalFg; this.fgRedStep =((this.tfg>>>16) - this.fgStartRed)/this.stepLength; this.fgGreenStep=(((this.tfg>>>8)&0xff) - this.fgStartGreen)/this.stepLength; this.fgBlueStep =((this.tfg&0xff) - this.fgStartBlue)/this.stepLength; this.newFgColour=0; }, changeDir:function(obj) { obj.bgRedStep=-obj.bgRedStep; obj.bgBlueStep=-obj.bgBlueStep; obj.bgGreenStep=-obj.bgGreenStep; obj.fgRedStep=-obj.fgRedStep; obj.fgBlueStep=-obj.fgBlueStep; obj.fgGreenStep=-obj.fgGreenStep; obj.stepDir=-obj.stepDir; }, blend:function(obj) { obj.bgStartRed+=obj.bgRedStep; obj.bgStartGreen+=obj.bgGreenStep; obj.bgStartBlue+=obj.bgBlueStep; obj.newBgColour=(obj.bgStartBlue+(obj.bgStartGreen<<8)+ (obj.bgStartRed<<16))&0xFFFFFF; obj.fgStartRed+=obj.fgRedStep; obj.fgStartGreen+=obj.fgGreenStep; obj.fgStartBlue+=obj.fgBlueStep; obj.newFgColour=(obj.fgStartBlue+(obj.fgStartGreen<<8)+ (obj.fgStartRed<<16))&0xFFFFFF; obj.obj.style.backgroundColor=this.toHexString(obj.newBgColour); obj.obj.style.color=this.toHexString(obj.newFgColour); obj.stepPos+=obj.stepDir; }, cFade:function(obj, fadeData, action) { for(var i=0; i0 ) this.blend(fi[i]); else if( fi[i].stepDir==1 ) if( fi[i].stepPos