Dialog Box

liunx · Jan 9, 2008

I'd like it when you put your mouse over a link, a little dialog box shows up with text in it. Not links but just text. Kind of like in a comic book. The dialog boxes that pop out from their mouths.the real easiest way ofcoure is just to use alt="blba" in your <a> tag, but when you want some more sophisticated ones: 
 
<a class="postlink" href="http://dynamicdrive.com/dynamicindex5/popinfo.htm">http://dynamicdrive.com/dynamicindex5/popinfo.htm</a> 
<a class="postlink" href="http://dynamicdrive.com/dynamicindex5/popinfo2.htm">http://dynamicdrive.com/dynamicindex5/popinfo2.htm</a> 
<a class="postlink" href="http://dynamicdrive.com/dynamicindex5/popinfo3.htm">http://dynamicdrive.com/dynamicindex5/popinfo3.htm</a> (with a fad3)Reading threads in here I came across this an hour or six ago. Having just learned how to get the regular mouseover pop-ups for links, and being currently immersed in JavaScript tutorials anyway, I ended up on a few of the sites linked in this thread. Well I decide to Download  a zip file(2: one text and one javascript) of one the scripts I found for the pop-ups that slowly fade in. Of course I'm in over my head but I've got it working with a problem. I didn't understand exactly where the directory for my webpage is supposed to be that I was supposed to upload the script file to. It was real clear that I put it there, but all I could figure was that directory was either a separate file that I would call on remotely from my page. Before I really go on and on... I'm just gonna put those directions on here: 
ALTTXT V1.2 
BY: BRIAN GOSSELIN OF SCRIPTASYLUM.COM 
 
-ADDED FADING EFFECT FOR IE4+ AND NS6+ ONLY 
-OPTIMIZED THE CODE A BIT. 
 
INSTRUCTIONS: 
 
STEP 1: Copy and paste the below code block into the <head> section of your page: 
 
<style> 
<!-- 
.navtext { 
width:150px; 
font-size:12pt; 
border-width:2px; 
border-style

utset; 
border-color:darkgray; 
layer-background-color:tan; 
background-color:tan; 
color:black; 
} 
--> 
</style> 
 
<script language="javascript" src=http://www.htmlforums.com/archive/index.php/"alttxt.js"> 
 
//Popup info box III (By Brian Gosselin, <a class="postlink" href="http://scriptasylum.com/bgaudiodr/">http://scriptasylum.com/bgaudiodr/</a>) 
//Script featured on Dynamicdrive.com 
//For full source, TOS, and 100's more DHTML scripts, visit <a class="postlink" href="http://www.dynamicdrive.com">http://www.dynamicdrive.com</a> 
 
</script> 
 
STEP 2: Add the below <div> tag to the end of your document: 
 
<div id="navtxt" class="navtext" style="position:absolute; top:-100px; left:0px; visibility:hidden"> 
</div> 
 
 
STEP 3: Having done the above, use a setup similar to the below to add a popup description to each link(s): 
 
<a href=http://www.htmlforums.com/archive/index.php/"http://www.dynamicdrive.com" onmouseover="writetxt('Welcome to Dynamic Drive, the primier DHTML code library online!')" onmouseout="writetxt(0)">Dynamic Drive</a> 
 
 
STEP 4: Finally, be sure to upload the accompanying alttxt.js file into your webpage directory. 
 
That last bold part is where I'm lost. I put that part in the head and one little pop-up like box showed up about two screens heights down from the top, with some code inside, and it was only halfway down to where the table I had on my testing page(supposed to be at the top) even started. After the body, the same code produced two pages of visable code below the table... but back up in my table where the link is, there a neat pop-up just the I had imagined. I'm sorry for going on, but can anyone straighten me out or maybe try to explain where I'm supposed to be putting that file per the directions step#4? As far as I knew my 'webpage' directory was the list of files in my file manager, and it's there but if that's right I don't know how to call on it from my test page. 
 
Thanks for any help, insight, and most importantly, tolerance.

Dialog Box

liunx

Guest