« »

Links with a Tool Tip that Grows when you pass your cursor over them. Works in IE 5+, Netscape 7+, Mozilla 1.2+ - In IE ToolTip follows cursor, in Gecko-Based Browsers (Netscape, Mozilla) displays under links.

Label: Links with Growing ToolTips

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<STYLE type=text/css>
A.LINKS {
	BACKGROUND-COLOR: #000; BORDER-BOTTOM: #00ff00 1px groove; BORDER-LEFT: #00ff00 1px groove; BORDER-RIGHT: #00ff00 1px groove; BORDER-TOP: #00ff00 1px groove; COLOR: #00ff00; FONT-WEIGHT: 900
}
A.LINKS:hover {
	COLOR: #fff
}
SPAN.Alt {
	BACKGROUND-COLOR: black; BORDER-BOTTOM: #00ff00 3px groove; BORDER-LEFT: #00ff00 3px groove; BORDER-RIGHT: #00ff00 3px groove; BORDER-TOP: #00ff00 3px groove; COLOR: #00ff00; POSITION: absolute; VISIBILITY: hidden; WIDTH: 0px; Z-INDEX: 1
}
</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<SCRIPT language=JavaScript type=text/javascript>

// - *** Edit Script in Body Section of Document . . . ***

var jsbank;var jeTPring;var DHTML=ALink=URLS=new Array();var toggle=true;
var DynamicResizer=DynamicFSResizer=0;
var OFFSET=10; // - OFFSET form cursor
var WIDTH=200; // - Max width
var MaxFS=20; // - Max Font Size
var AMT=5; // - Amount to add each cycle when resizing
var TIMEOUT=30; // - Number in Milliseconds for timeout
var T; // - Timer
window.onload=setXY;
window.document.onmousemove=followMOUSE;

function setXY()
{
  if(navigator.appName=="Netscape")document.captureEvents(Event.MOUSEMOVE);
	setVars();
}
function setVars()
{
   jeTPring=document.getElementById('DISPLAY');
}
function followMOUSE(e)
{
  jeTPring.style.left=(navigator.appName=="Netscape")?e.PageX:event.clientX+OFFSET;
	jeTPring.style.top=(navigator.appName=="Netscape")?e.PageY:event.clientY+OFFSET;
}
function creatDHTML(SCRIPTING) // - Show ToolTip
{
  jeTPring.innerHTML=DHTML[SCRIPTING];
	jeTPring.className="Alt";
	jeTPring.style.visibility="visible";
	toggle=true;
	EFFECT();
}
function DynamicHTML()// - Hide ToolTip
{
  jeTPring.style.visibility="hidden";
	DynamicFSResizer=0;DynamicResizer=0;
	toggle=false;
	clearTimeout(T);
}
function EFFECT()
{
  if(toggle)
	{
	 if(DynamicResizer<WIDTH)
	 {
	   with(jeTPring.style)
		 {
		   width=DynamicResizer;
			 fontSize=DynamicFSResizer;
		 }
		 if(DynamicFSResizer<=MaxFS)DynamicFSResizer++;
		 DynamicResizer+=AMT;
	 }
	}
 T=setTimeout("EFFECT();",TIMEOUT);
}
function HAWAII(){
	jsbank="http://JavaScriptBank.com";
	location.href=jsbank;
	}
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<DIV id=JavaScripts name="Dynamic">
<SCRIPT language=JavaScript type=text/javascript>
			<!--
			/* - ALink, DHTML, URLS should all have the same number of entries */
			// - Edit variable Below ( ie.  <variable>=["<item 1>","<item 2>","<item 3>","<item 4>","<item 5>","<item 6>"];  )
			
			//- START MODIFICATIONS
			 ALink=["One","Two","Three","Four","Five"]; // - Link Lables
			 DHTML=["This is a discription of item number one ...","A Description of Item TWO Goes HERE ...","Item Number Three's Description goes here . . .","Number Four and still Strong . . .","Dynamic Scripts Rule!!!"]; // - ToolTips
			 URLS=["http://JavaScriptBank.com","http://JavaScriptBank.com","http://JavaScriptBank.com","http://JavaScriptBank.com","http://JavaScriptBank.com"]; // - Web Address (URL)
			// - END MODIFICATIONS 
			 
			 if(DHTML.length<ALink.length)DHTML.length=ALink.length;
			 for(var scripts=0;scripts<ALink.length;scripts++)
			  document.write('<a href="'+URLS[scripts]+'" class="LINKS" onmouseover="creatDHTML('+scripts+')" onmouseout="DynamicHTML()">'+ALink[scripts]+'</a><b style="visibility:hidden;">_</b>');
			 if(navigator.appName=="Netscape")document.write("<br />");
			//-->
			</SCRIPT>
<SPAN id=DISPLAY style="POSITION: absolute; VISIBILITY: hidden"></span>
</div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->