Link Description Code Help

**SeK612** · 02-14-2004, 10:31 PM

I'm using a link description code from here to pop up a brief description of the links when a visitor hovers over them (code below). It works fine but I have new links that I wont to add descriptions for. I try and add a new line under the

Code:

// ######### popup text

bit but I then get a message saying "an error has occurred" and asking whether I want to continue running scripts. This message also displays when the links are hovered over. Is it possible to add more descriptions for the new links and how do I modify the code to do this?

Thanks,

SeK612

Code:

&#60;&#33;-- TWO STEPS TO INSTALL POP-UP LINK WITH DESCRIPTION&#58;

 1. Copy the coding into the HEAD of your HTML document
 2. Add the last code into the BODY of your HTML document --&#62;

&#60;&#33;-- STEP ONE&#58; Paste this code into the HEAD of your HTML document --&#62;

&#60;HEAD&#62;

&#60;script LANGUAGE=&#34;JavaScript&#34;&#62;

&#60;&#33;-- This script and many more are available free online at --&#62;
&#60;&#33;-- The JavaScript Source&#33;&#33; http&#58;//javascript.internet.com --&#62;
&#60;&#33;-- Original&#58; Patrick Lewis &#40;[email protected]&#41; --&#62;
&#60;&#33;-- Web Site&#58; http&#58;//www.patricklewis.net --&#62;
&#60;&#33;-- Begin
//  ############## SIMPLE BROWSER SNIFFER
if &#40;document.layers&#41; {navigator.family = &#34;nn4&#34;}
if &#40;document.all&#41; {navigator.family = &#34;ie4&#34;}
if &#40;window.navigator.userAgent.toLowerCase&#40;&#41;.match&#40;&#34;gecko&#34;&#41;&#41; {navigator.family = &#34;gecko&#34;}

//######### popup text 
descarray = new Array&#40;
&#34;This site has some of the greatest scripts around&#33;&#34;,
&#34;These popups can have varying width. It is dependant upon the text message.&#34;,
&#34;You can have &#60;b&#62;two&#60;/b&#62; lines &#60;br&#62;and HTML content.&#34;,
&#34;You can also have images in here like this&#58;&#60;br&#62;&#60;img src=greenbar.gif&#62;&#34;,
&#34;You can put in a really long &#60;br&#62;description if it is nessary to &#60;br&#62;explain something in detail, &#60;br&#62;like a warning about content &#60;br&#62;or privacy.&#34;,
&#34;&#60;/center&#62;Lastly, you can have links like these&#58;&#60;br&#62;&#60;a href=&#39;http&#58;//javascript.internet.com/&#39;&#62;JavaScript Source&#60;/a&#62;&#60;br&#62;&#60;a href=&#39;http&#58;//javascript.internet.com/&#39;&#62;JavaScript Source&#60;/a&#62;&#60;br&#62;&#60;a href=&#39;http&#58;//javascript.internet.com/&#39;&#62;JavaScript Source&#60;/a&#62;&#60;br&#62;With a change in the onmouseout event handler.&#34;
&#41;;

overdiv=&#34;0&#34;;
// ######### CREATES POP UP BOXES 
function popLayer&#40;a&#41;{
if&#40;&#33;descarray&#91;a&#93;&#41;{descarray&#91;a&#93;=&#34;&#60;font color=red&#62;This popup &#40;#&#34;+a+&#34;&#41; isn&#39;t setup correctly - needs description&#60;/font&#62;&#34;;}
if &#40;navigator.family == &#34;gecko&#34;&#41; {pad=&#34;0&#34;; bord=&#34;1 bordercolor=black&#34;;}
else {pad=&#34;1&#34;; bord=&#34;0&#34;;}
desc =  &#34;&#60;table cellspacing=0 cellpadding=&#34;+pad+&#34; border=&#34;+bord+&#34; bgcolor=000000&#62;&#60;tr&#62;&#60;td&#62;&#092;n&#34;
	+&#34;&#60;table cellspacing=0 cellpadding=3 border=0 width=100%&#62;&#60;tr&#62;&#60;td bgcolor=ffffdd&#62;&#60;center&#62;&#60;font size=-1&#62;&#092;n&#34;
	+descarray&#91;a&#93;
	+&#34;&#092;n&#60;/td&#62;&#60;/tr&#62;&#60;/table&#62;&#092;n&#34;
	+&#34;&#60;/td&#62;&#60;/tr&#62;&#60;/table&#62;&#34;;
if&#40;navigator.family ==&#34;nn4&#34;&#41; {
	document.object1.document.write&#40;desc&#41;;
	document.object1.document.close&#40;&#41;;
	document.object1.left=x+15;
	document.object1.top=y-5;
	}
else if&#40;navigator.family ==&#34;ie4&#34;&#41;{
	object1.innerHTML=desc;
	object1.style.pixelLeft=x+15;
	object1.style.pixelTop=y-5;
	}
else if&#40;navigator.family ==&#34;gecko&#34;&#41;{
	document.getElementById&#40;&#34;object1&#34;&#41;.innerHTML=desc;
	document.getElementById&#40;&#34;object1&#34;&#41;.style.left=x+15;
	document.getElementById&#40;&#34;object1&#34;&#41;.style.top=y-5;
	}
}
function hideLayer&#40;&#41;{
if &#40;overdiv == &#34;0&#34;&#41; {
	if&#40;navigator.family ==&#34;nn4&#34;&#41; {eval&#40;document.object1.top=&#34;-500&#34;&#41;;}
	else if&#40;navigator.family ==&#34;ie4&#34;&#41;{object1.innerHTML=&#34;&#34;;}
	else if&#40;navigator.family ==&#34;gecko&#34;&#41; {document.getElementById&#40;&#34;object1&#34;&#41;.style.top=&#34;-500&#34;;}
	}
}

// ######## TRACKS MOUSE POSITION FOR POPUP PLACEMENT
var isNav = &#40;navigator.appName.indexOf&#40;&#34;Netscape&#34;&#41; &#33;=-1&#41;;
function handlerMM&#40;e&#41;{
x = &#40;isNav&#41; ? e.pageX &#58; event.clientX + document.body.scrollLeft;
y = &#40;isNav&#41; ? e.pageY &#58; event.clientY + document.body.scrollTop;
}
if &#40;isNav&#41;{document.captureEvents&#40;Event.MOUSEMOVE&#41;;}
document.onmousemove = handlerMM;
// End --&#62;
&#60;/script&#62;

&#60;/HEAD&#62;

&#60;&#33;-- STEP TWO&#58; Copy this code into the BODY of your HTML document --&#62;

&#60;BODY&#62;

&#60;div id=&#34;object1&#34; style=&#34;position&#58;absolute; background-color&#58;FFFFDD;color&#58;black;border-color&#58;black;border-width&#58;20; visibility&#58;show; left&#58;25px; top&#58;-100px; z-index&#58;+1&#34; onmouseover=&#34;overdiv=1;&#34; onmouseout=&#34;overdiv=0; setTimeout&#40;&#39;hideLayer&#40;&#41;&#39;,1000&#41;&#34;&#62;
pop up description layer
&#60;/div&#62;

&#60;&#33;-- THE TEXT FOR THE POPUP DESCRIPTIONS ARE ON LINE 12 --&#62;

&#60;a href=&#34;http&#58;//javascript.internet.com&#34; onMouseOver=&#34;popLayer&#40;0&#41;&#34; onMouseOut=&#34;hideLayer&#40;&#41;&#34;&#62;&#60;font size=-1 face=arial&#62;&#60;b&#62;
THE JavaScript Source
	&#60;/b&#62;&#60;/font&#62;&#60;/a&#62;&#60;br&#62;

&#60;a href=&#34;#&#34; onMouseOver=&#34;popLayer&#40;1&#41;&#34; onMouseOut=&#34;hideLayer&#40;&#41;&#34;&#62;&#60;font size=-1 face=arial&#62;&#60;b&#62;
Variable width
	&#60;/b&#62;&#60;/font&#62;&#60;/a&#62;&#60;br&#62;

&#60;a href=&#34;#&#34; onMouseOver=&#34;popLayer&#40;2&#41;&#34; onMouseOut=&#34;hideLayer&#40;&#41;&#34;&#62;&#60;font size=-1 face=arial&#62;&#60;b&#62;
Double line popup
	&#60;/b&#62;&#60;/font&#62;&#60;/a&#62;&#60;br&#62;

&#60;a href=&#34;#&#34; onMouseOver=&#34;popLayer&#40;3&#41;&#34; onMouseOut=&#34;hideLayer&#40;&#41;&#34;&#62;&#60;font size=-1 face=arial&#62;&#60;b&#62;
Image sample
	&#60;/b&#62;&#60;/font&#62;&#60;/a&#62;&#60;br&#62;

&#60;a href=&#34;#&#34; onMouseOver=&#34;popLayer&#40;4&#41;&#34; onMouseOut=&#34;hideLayer&#40;&#41;&#34;&#62;&#60;font size=-1 face=arial&#62;&#60;b&#62;
Really long description
	&#60;/b&#62;&#60;/font&#62;&#60;/a&#62;&#60;br&#62;

&#60;a href=&#34;#&#34; onMouseOver=&#34;popLayer&#40;5&#41;&#34; onMouseOut=&#34;setTimeout&#40;&#39;hideLayer&#40;&#41;&#39;,2000&#41;&#34;&#62;&#60;font size=-1 face=arial&#62;&#60;b&#62;
Persistant with links
	&#60;/b&#62;&#60;/font&#62;&#60;/a&#62;&#60;br&#62;

&#60;p&#62;&#60;center&#62;
&#60;font face=&#34;arial, helvetica&#34; size&#34;-2&#34;&#62;Free JavaScripts provided&#60;br&#62;
by &#60;a href=&#34;http&#58;//javascriptsource.com&#34;&#62;The JavaScript Source&#60;/a&#62;&#60;/font&#62;
&#60;/center&#62;&#60;p&#62;

&#60;&#33;-- Script Size&#58; 5.08 KB --&#62;

**I.am** · 02-15-2004, 03:59 AM

Isnt that just screen tip?

If you have link and have this:

Code:

&#60;a title=&#34;I AM A SCREEN TIP&#34; href=&#34;http&#58;//www.mydomain.com&#34;&#62;Link Name&#60;/a&#62;

So when your mouse goes on the link a small text box sort of emerges to display what you have in title. Isnt that just this?

h1 · 02-15-2004, 04:56 AM

Change this...

Code:

descarray = new Array&#40;
&#34;This site has some of the greatest scripts around&#33;&#34;,
&#34;These popups can have varying width. It is dependant upon the text message.&#34;,
&#34;You can have &#60;b&#62;two&#60;/b&#62; lines &#60;br&#62;and HTML content.&#34;,
&#34;You can also have images in here like this&#58;&#60;br&#62;&#60;img src=greenbar.gif&#62;&#34;,
&#34;You can put in a really long &#60;br&#62;description if it is nessary to &#60;br&#62;explain something in detail, &#60;br&#62;like a warning about content &#60;br&#62;or privacy.&#34;,
&#34;&#60;/center&#62;Lastly, you can have links like these&#58;&#60;br&#62;&#60;a href=&#39;http&#58;//javascript.internet.com/&#39;&#62;JavaScript Source&#60;/a&#62;&#60;br&#62;&#60;a href=&#39;http&#58;//javascript.internet.com/&#39;&#62;JavaScript Source&#60;/a&#62;&#60;br&#62;&#60;a href=&#39;http&#58;//javascript.internet.com/&#39;&#62;JavaScript Source&#60;/a&#62;&#60;br&#62;With a change in the onmouseout event handler.&#34;
&#41;;

...to this...

Code:

descarray=new Array&#40;&#34;The first tooltip&#34;,&#34;The second one&#34;,&#34;The third one&#34;,&#34;And so on&#34;&#41;;
function on&#40;a&#41;{popLayer&#40;a&#41;;}
function off&#40;&#41;{hideLayer&#40;&#41;;}

Change the tooltip texts like I did. To call a tooltip, do this to a link...

Code:

&#60;a href=&#34;link.here&#34; onMouseOver=&#34;on&#40;NUMBER&#41;;&#34; onMouseOut=&#34;off&#40;&#41;;&#34;&#62;link text&#60;/a&#62;

Change number to the corresponding number in the array minus 1. So if you wanted to call "And so on," it would be...

Code:

&#60;a href=&#34;link.here&#34; onMouseOver=&#34;on&#40;3&#41;;&#34; onMouseOut=&#34;off&#40;&#41;;&#34;&#62;link text&#60;/a&#62;

...because it is the fourth array element.

Hope this helps.

Edit: You can also use HTML here... that's also directed at you, I.am.

**I.am** · 02-15-2004, 09:40 AM

I did use html, What exactly he wanted? On the page it looked more like ToolTip /Screen Tip which is just obvious. And thats what I gave an example of.

Obviously I didnt read his script when the solution looked so obvious

h1 · 02-15-2004, 08:40 PM

I was saying he can use HTML in the tooltips.

**I.am** · 02-15-2004, 10:57 PM

Originally posted by haxor41789@15 February 2004 - 13:40
I was saying he can use HTML in the tooltips.

Damn! I thought you said, "it was also directed to you, I.am" meaning saying to me

Damn! you haxor!

Btw did you saw the keyboard i posted in the lounge yesterday? Even reserved a key for you

h1 · 02-16-2004, 01:56 AM

I feel special.

**I.am** · 02-16-2004, 03:40 AM

h1 · 02-16-2004, 08:25 AM

h4x0rZ can't even spell "wft" right.

Oh yeah... got some more haxor art...

Code:

 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _____
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|| &nbsp; || 
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|&#092;___/|
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;| &nbsp; &nbsp; |
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;| &nbsp; &nbsp; |
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;| &nbsp; &nbsp; |
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;| &nbsp; &nbsp; |
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;| &nbsp; &nbsp; |
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;| &nbsp; &nbsp; |
 &nbsp; &nbsp; &nbsp; _____| &nbsp; &nbsp; |_____
 &nbsp; &nbsp; &nbsp;/ &nbsp; &nbsp; | &nbsp; &nbsp; | &nbsp; &nbsp; &#092;
 &nbsp;____| &nbsp; &nbsp; | &nbsp; &nbsp; | &nbsp; &nbsp; |_
/ &nbsp; &nbsp;| &nbsp; &nbsp; | &nbsp; &nbsp; | &nbsp; &nbsp; | &#092;
| &nbsp; &nbsp;| &nbsp; &nbsp; | &nbsp; &nbsp; | &nbsp; &nbsp; | &nbsp;|
| &nbsp; &nbsp;| &nbsp; &nbsp; | &nbsp; &nbsp; | &nbsp; &nbsp; | &nbsp;|
| &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;| &nbsp;|
| &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;| &nbsp;|
| &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; / 
| &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/
 &nbsp;&#092; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/
 &nbsp; &#092; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/ 
 &nbsp; | &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |
 &nbsp; | &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |

**I.am** · 02-16-2004, 08:36 AM

Code:

 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;______
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .-&#34; &nbsp; &nbsp; &nbsp;&#34;-.
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&#092;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |, &nbsp;.-. &nbsp;.-. &nbsp;,|
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | &#41;&#40;__/ &nbsp;&#092;__&#41;&#40; |
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |/ &nbsp; &nbsp; /&#092; &nbsp; &nbsp; &#092;|
 &nbsp; &nbsp; &nbsp; &#40;@_ &nbsp; &nbsp; &nbsp; &#40;_ &nbsp; &nbsp; ^^ &nbsp; &nbsp; _&#41;
 &nbsp;_ &nbsp; &nbsp; &#41; &#092;_______&#092;__|IIIIII|__/__________________________
 &#40;_&#41;@8@8{}&#60;________|-&#092;IIIIII/-|___________________________&#62;
 &nbsp; &nbsp; &nbsp; &nbsp;&#41;_/ &nbsp; &nbsp; &nbsp; &nbsp;&#092; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/
 &nbsp; &nbsp; &nbsp; &#40;@ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `--------` aha

Thread: Link Description Code Help

Thread Tools

Bookmarks

Bookmarks

Posting Permissions