Full version: jsB@nk » Link » Tooltip » Textual tooltip II
URL: https://www.javascriptbank.com/textual-tooltip-ii.html
Welcome to version two of the original textual tooltip script, which fades into view descriptive text when the mouse moves over their corresponding links. Effect visible in NS4+ (including NS 6) and IE 4+.
Full version: jsB@nk » Link » Tooltip » Textual tooltip II
URL: https://www.javascriptbank.com/textual-tooltip-ii.html
<script>// Textual tooltip II (fade into view)// Roy Whittle , [email protected]// http://www.roy.whittle.com/var FadingObject = new Array();var FadeRunning=false;var FadeInterval=30;var hexDigit=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");function dec2hex(dec){return(hexDigit[dec>>4]+hexDigit[dec&15]);}function hex2dec(hex){return(parseInt(hex,16))}function createFaderObject(theDiv, numSteps, startColor){if(!startColor)startColor = "000000";this.name= theDiv;this.text= null;this.color= "FFFFFF";this.next_text= null;this.next_color= null;this.state= "OFF";this.index= 0;this.steps= numSteps;this.r= hex2dec(startColor.slice(0,2));this.g= hex2dec(startColor.slice(2,4));this.b= hex2dec(startColor.slice(4,6));}function FadingText(theDiv, numSteps, startColor){FadingObject[theDiv] = new createFaderObject(theDiv, numSteps, startColor);}function start_fading(){if(!FadeRunning)FadeAnimation();}function set_text(f){if(navigator.appName.indexOf("Netscape") != -1&& document.getElementById){var theElement = document.getElementById(f.name);var newRange = document.createRange();newRange.setStartBefore(theElement);var strFrag = newRange.createContextualFragment(f.text);while (theElement.hasChildNodes())theElement.removeChild(theElement.lastChild);theElement.appendChild(strFrag);theElement.style.color="#"+f.startColor;}}function getColor(f){var r=hex2dec(f.color.slice(0,2));var g=hex2dec(f.color.slice(2,4));var b=hex2dec(f.color.slice(4,6));r2= Math.floor(f.r+(f.index*(r-f.r))/(f.steps) + .5);g2= Math.floor(f.g+(f.index*(g-f.g))/(f.steps) + .5);b2= Math.floor(f.b+(f.index*(b-f.b))/(f.steps) + .5);return("#" + dec2hex(r2) + dec2hex(g2) + dec2hex(b2));}function setColor(fadeObj){var theColor=getColor(fadeObj);var str="<FONT COLOR="+ theColor + ">" + fadeObj.text + "</FONT>";var theDiv=fadeObj.name;//if IE 4+if(document.all){document.all[theDiv].innerHTML=str;}//else if NS 4else if(document.layers){document.nscontainer.document.layers[theDiv].document.write(str);document.nscontainer.document.layers[theDiv].document.close();}//else if NS 6 (supports new DOM, may work in IE5) - see Website Abstraction for more info.//http://www.wsabstract.com/javatutors/dynamiccontent4.shtmlelse if (document.getElementById){theElement = document.getElementById(theDiv);theElement.style.color=theColor;}}function fade_up(theDiv, newText, newColor){var f=FadingObject[theDiv];if(newColor == null)newColor="FFFFFF";if(f.state == "OFF"){f.text = newText;f.color = newColor;f.state = "FADE_UP";set_text(f);start_fading();}else if( f.state == "FADE_UP_DOWN"|| f.state == "FADE_DOWN"|| f.state == "FADE_DOWN_UP"){if(newText == f.text)f.state = "FADE_UP";else{f.next_text = newText;f.next_color = newColor;f.state = "FADE_DOWN_UP";}}}function fade_down(theDiv){var f=FadingObject[theDiv];if(f.state=="ON"){f.state="FADE_DOWN";start_fading();}else if(f.state=="FADE_DOWN_UP"){f.state="FADE_DOWN";f.next_text = null;}else if(f.state == "FADE_UP"){f.state="FADE_UP_DOWN";}}function FadeAnimation(){FadeRunning = false;for (var d in FadingObject){var f=FadingObject[d];if(f.state == "FADE_UP"){if(f.index < f.steps)f.index++;elsef.index = f.steps;setColor(f);if(f.index == f.steps)f.state="ON";elseFadeRunning = true;}else if(f.state == "FADE_UP_DOWN"){if(f.index < f.steps)f.index++;elsef.index = f.steps;setColor(f);if(f.index == f.steps)f.state="FADE_DOWN";FadeRunning = true;}else if(f.state == "FADE_DOWN"){if(f.index > 0)f.index--;elsef.index = 0;setColor(f);if(f.index == 0)f.state="OFF";elseFadeRunning = true;}else if(f.state == "FADE_DOWN_UP"){if(f.index > 0)f.index--;elsef.index = 0;setColor(f);if(f.index == 0){f.text = f.next_text;f.color = f.next_color;f.next_text = null;f.state ="FADE_UP";set_text(f);}FadeRunning = true;}}/*** Check to see if we need to animate any more frames. ***/if(FadeRunning)setTimeout("FadeAnimation()", FadeInterval);}FadingText('fade1', 10,"FFFFFF");FadeInterval=30;</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><A HREF="http://www.JavaScriptBank.com" onMouseOver="fade_up('fade1','<FONT SIZE=4 FACE=Verdana><TABLE border=0>Textual tooltip II (fade into view) this link</TABLE></FONT>','000000')" onMouseOut="fade_down('fade1')">JavaScriptBank.com</A><script language="JavaScript1.2">if (document.layers){document.write('<ilayer name="nscontainer" width="100%" height="100">')document.write('<layer name="fade1" width="100%" height="100">')document.write('</layer></ilayer>')}elsedocument.write('<DIV ID="fade1"></DIV>')</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->