PDA

View Full Version : Link Description Code Help


SeK612
02-14-2004, 10:31 PM
I'm using a link description code from here (http://javascript.internet.com/navigation/pop-up-link-with-description.html) 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
// ######### 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




<!-- TWO STEPS TO INSTALL POP-UP LINK WITH DESCRIPTION:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<script LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Patrick Lewis ([email protected]) -->
<!-- Web Site: http://www.patricklewis.net -->
<!-- Begin
// ############## SIMPLE BROWSER SNIFFER
if (document.layers) {navigator.family = "nn4"}
if (document.all) {navigator.family = "ie4"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {navigator.family = "gecko"}

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

overdiv="0";
// ######### CREATES POP UP BOXES
function popLayer(a){
if(!descarray[a]){descarray[a]="<font color=red>This popup (#"+a+") isn't setup correctly - needs description</font>";}
if (navigator.family == "gecko") {pad="0"; bord="1 bordercolor=black";}
else {pad="1"; bord="0";}
desc = "<table cellspacing=0 cellpadding="+pad+" border="+bord+" bgcolor=000000><tr><td>\n"
+"<table cellspacing=0 cellpadding=3 border=0 width=100%><tr><td bgcolor=ffffdd><center><font size=-1>\n"
+descarray[a]
+"\n</td></tr></table>\n"
+"</td></tr></table>";
if(navigator.family =="nn4") {
document.object1.document.write(desc);
document.object1.document.close();
document.object1.left=x+15;
document.object1.top=y-5;
}
else if(navigator.family =="ie4"){
object1.innerHTML=desc;
object1.style.pixelLeft=x+15;
object1.style.pixelTop=y-5;
}
else if(navigator.family =="gecko"){
document.getElementById("object1").innerHTML=desc;
document.getElementById("object1").style.left=x+15;
document.getElementById("object1").style.top=y-5;
}
}
function hideLayer(){
if (overdiv == "0") {
if(navigator.family =="nn4") {eval(document.object1.top="-500");}
else if(navigator.family =="ie4"){object1.innerHTML="";}
else if(navigator.family =="gecko") {document.getElementById("object1").style.top="-500";}
}
}

// ######## TRACKS MOUSE POSITION FOR POPUP PLACEMENT
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
function handlerMM(e){
x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;
}
if (isNav){document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM;
// End -->
</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<div id="object1" style="position:absolute; background-color:FFFFDD;color:black;border-color:black;border-width:20; visibility:show; left:25px; top:-100px; z-index:+1" onmouseover="overdiv=1;" onmouseout="overdiv=0; setTimeout('hideLayer()',1000)">
pop up description layer
</div>

<!-- THE TEXT FOR THE POPUP DESCRIPTIONS ARE ON LINE 12 -->

<a href="http://javascript.internet.com" onMouseOver="popLayer(0)" onMouseOut="hideLayer()"><font size=-1 face=arial><b>
THE JavaScript Source
</b></font></a><br>

<a href="#" onMouseOver="popLayer(1)" onMouseOut="hideLayer()"><font size=-1 face=arial><b>
Variable width
</b></font></a><br>

<a href="#" onMouseOver="popLayer(2)" onMouseOut="hideLayer()"><font size=-1 face=arial><b>
Double line popup
</b></font></a><br>

<a href="#" onMouseOver="popLayer(3)" onMouseOut="hideLayer()"><font size=-1 face=arial><b>
Image sample
</b></font></a><br>

<a href="#" onMouseOver="popLayer(4)" onMouseOut="hideLayer()"><font size=-1 face=arial><b>
Really long description
</b></font></a><br>

<a href="#" onMouseOver="popLayer(5)" onMouseOut="setTimeout('hideLayer()',2000)"><font size=-1 face=arial><b>
Persistant with links
</b></font></a><br>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size: 5.08 KB -->
I.am
02-15-2004, 03:59 AM
Isnt that just screen tip?

If you have link and have this:


<a title="I AM A SCREEN TIP" href="http://www.mydomain.com">Link Name</a>

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...

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


descarray=new Array("The first tooltip","The second one","The third one","And so on");
function on(a){popLayer(a);}
function off(){hideLayer();}
Change the tooltip texts like I did. To call a tooltip, do this to a link...


<a href="link.here" onMouseOver="on(NUMBER);" onMouseOut="off();">link text</a>
Change number to the corresponding number in the array minus 1. So if you wanted to call "And so on," it would be...


<a href="link.here" onMouseOver="on(3);" onMouseOut="off();">link text</a>
...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. :P
I.am
02-15-2004, 09:40 AM
:unsure: 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. :) :P :P Obviously I didnt read his script when the solution looked so obvious :lol:
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. ;)
:lol: :lol: Damn! I thought you said, "it was also directed to you, I.am" meaning saying to me :lol: :lol:


Damn! you haxor!

Btw did you saw the keyboard i posted in the lounge yesterday? Even reserved a key for you :D
h1
02-16-2004, 01:56 AM
http://www.sighost.us/members/Iam/irckeyboard.jpg
http://www.funnydoodle.com/images/fp-3.gif
:w00t: I feel special. :P
I.am
02-16-2004, 03:40 AM
:lol: :lol: :lol: :lol:
h1
02-16-2004, 08:25 AM
:lol: h4x0rZ can't even spell "wft" right. :lol:

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


            _____
           ||   ||
           |\___/|
           |     |
           |     |
           |     |
           |     |
           |     |
           |     |
      _____|     |_____
     /     |     |     \
 ____|     |     |     |_
/    |     |     |     | \
|    |     |     |     |  |
|    |     |     |     |  |
|                      |  |
|                      |  |
|                         /
|                        /
 \                      /
  \                    /
  |                   |
  |                   |

:D
I.am
02-16-2004, 08:36 AM
                     ______
                  .-"      "-.
                 /            \
                |              |
                |,  .-.  .-.  ,|
                | )(__/  \__)( |
                |/     /\     \|
      (@_       (_     ^^     _)
 _     ) \_______\__|IIIIII|__/__________________________
(_)@8@8{}<________|-\IIIIII/-|___________________________>
       )_/        \          /
      (@           `--------` aha