Tip Window

	Visited: 6284
	2.4/5.0 (55 votes total)
	Rate: Select 1 - Terrible 2 - Poor 3 - Average 4 - Good 5 - Outstanding

Description:

Create an instant JavaScript tip window with this tool.

Use this JavaScript to generate instant pop-up "tip windows" when a user hovers their mouse over a link on your page. Enter the parameters for your tip window: URL: Name: Height (in pixels): Width (in pixels): 1. Place the following code in your document's head: 2. Add the following code as attributes for your link's <A> tag:

JavaScript Functions:
<SCRIPT LANGUAGE="JavaScript"> <!-- if (window.focus) { self.focus(); } function generateCode() { var headArea = document.form1.head var text ='// Quick way to test for Nav4 and IE4\n' text += 'version4 = false\n' text += 'if(navigator.appVersion.charAt(0) == "4") version4 = true\n' text += '\n' text += 'function displayPopup(url,name,height,width,evnt) {\n' text += ' var properties = "toolbar=0,location=0,height="+height\n' text += ' properties = properties+",width="+width\n' text += ' if(evnt != null) {\n' text += ' if(navigator.appName == "Microsoft Internet Explorer") {\n' text += ' properties = properties+",left="+(evnt.screenX + 10)\n' text += ' properties = properties+",top="+(evnt.screenY + 10)\n' text += ' }else { // Navigator coordinates must be adjusted for scrolling\n' text += ' properties = properties+",left="+(evnt.screenX - pageXOffset + 10)\n' text += ' properties = properties+",top="+(evnt.screenY - pageYOffset + 10)\n' text += ' }\n' text += ' }\n' text += ' popupHandle = open(url,name,properties)\n' text += '}\n' text += 'function closePopup() {\n' text += ' // mouseOut was introduced with JavaScript 1.1, so Navigator 2 users will\n' text += ' // have to manually close the window\n' text += ' if(popupHandle != null && !popupHandle.closed) popupHandle.close()\n' text += '}\n' headArea.value = text; var textArea = document.form1.body var code = 'HREF="javascript:void(0)"\n' code += 'ONMOUSEOVER="displayPopup(' code += "'"+document.form1.url.value+"','" code += document.form1.name.value code += "',"+document.form1.height.value code += ","+document.form1.width.value+"," code += '(version4 ? event : null))"\n' code += 'ONMOUSEOUT="closePopup()"' textArea.value = code } // --> </SCRIPT>

HTML Script:
<table witdth=560> <tr> <td> <table width=100% border=0 cellpadding=0 cellspacing=0> <tr><td align=center> </td> <td align=right> <table hspace=2 vspace=2 align=right><tr><td align=center> <table cellpadding=4 cellspacing=0 border=0 width=100%><tr> <td bcolor=#ffffff align=center></td> </tr></table> </td></tr></table> </td> </tr></table> Use this JavaScript to generate instant pop-up "tip windows" when a user hovers their mouse over a link on your page. <p> <table width=100% border=0 cellpadding=0 cellspacing=0> <tr> <td align=left bgcolor=#ffffff> <td align=left bgcolor=#ffffff> <br> <FORM NAME="form1"> <B>Enter the parameters for your tip window:</B> <p> <B>URL:</B> <INPUT NAME="url" SIZE="60" VALUE=""> <br> <B>Name:</B> <INPUT NAME="name" SIZE="40" VALUE=""> <br> <B>Height (in pixels):</B> <INPUT NAME="height" SIZE="10" VALUE=""><nobr> <B>Width (in pixels):</B> <INPUT NAME="width" SIZE="10" VALUE=""> <p> <div align=center><INPUT TYPE="BUTTON" VALUE="See the code below" NAME="generate" ONCLICK="generateCode()"></div> <br> </td></tr></table> <table width=100% border=0 cellpadding=0 cellspacing=0> <tr> <td align=left bgcolor=#ffffff> <td align=left> <br> <b>1. Place the following code in your document's head:</b> <p> <TEXTAREA NAME="head" ROWS="10" COLS="70" READONLY="READONLY" WRAP="Off"></TEXTAREA> <p> <b>2. Add the following code as attributes for your link's <font face="Arial, Helvetica" size=-1 color="#ff6633">&lt;A&gt;</font> tag:</b> <p> <TEXTAREA NAME="body" ROWS="3" COLS="70" WRAP="Off"></TEXTAREA></FORM> </td></tr></table> </td> </tr> </table>