Alt tag in text links

@SiddanOct 08.2004

hey all, need some helping hand here since I can´t find elsewhere.

I am trying to put in some amount of “alt” text inside a link so once hovering the link a textbox will float right under with the text I want explaining with the link

I know I can use the “title” but it disappears after like 5 seconds so it is no good. I remember some time ago seeing this feature and it really looked nice with the custom made textbox than the ordinary IE explorer style.

thanks

to post a comment

JavaScript

8 Comments(s) _↴

@VladdyOct 08.2004 — #www.klproductions.com/kltooltips.html

@SiddanauthorOct 11.2004 — #thanks

I´ve been exploring this for hours with no success ?

can´t figure out what I am doing wrong

but is it free btw? I understood I can download the evaulation demo file but there is this manual script which is there to copy all the files needed

@KorOct 11.2004 — #Try this... It is not a big deal for me, so I guess I may let you use it with no restrictions... ?

Feel free to change CSS attributes and "alt" descriptive texts upon your need.

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <style type="text/css">
 #altext{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 9px;
 color: #0000FF;
 background-color: #FFFFCC;
 padding: 2px;
 width: 150px;
 border: 1px solid #000000;
 position:absolute;
 display:none;
 z-index:10;
 }
 </style>
 <script language="JavaScript" type="text/JavaScript">
 var txt= new Array()//set bellow the descriptive text
 txt[0] = ' Some text here for LINK 1 text text text text bla bla';
 txt[1] = ' Another text here for LINK #2 text text text text bla bla';
 txt[2] = ' Text here for LINK #3 text text text text bla';
 function showA(o,w){
 oX=o.offsetLeft;
 oY=o.offsetTop;
 oH=o.offsetHeight;
 d=document.getElementById('altext');
 d.firstChild.nodeValue=txt[w];
 d.style.left=oX;
 d.style.top=oY+oH;
 d.style.display='block';
 }
 function hideA(){
 document.getElementById('altext').style.display='none';
 }
 </script>
 </head>
 <body>
 <div id="altext">&nbsp;</div>
 <a href="#" onmouseover="showA(this,0)" onmouseout="hideA()">LINK1</a><br><br>
 <a href="#" onmouseover="showA(this,1)" onmouseout="hideA()">LINK2</a><br><br>
 <a href="#" onmouseover="showA(this,2)" onmouseout="hideA()">LINK3</a>
 </body>
 </html>
 [/code]

@Warren86Oct 11.2004 — #<HTML>

<Head>

<Script Language=JavaScript>

var absStr = "Position:Absolute;Top:0;Left:0";
  var yOff = 70;  // use this to position the message in the vertical axis
  var xOff = 20;  // use this to position the message in the horizontal axis
 
  function isNext(fName){
 
   window.location = fName;
  }
 
  function stayHome(){ 
 
   iL = document.body.scrollLeft; 
   iV = document.body.scrollTop; 
   mX = event.screenX-xOff+iL;
   mY = event.screenY-yOff+iV;
   isFloat.style.left = mX; 
   isFloat.style.top = mY; 
  }
 
  document.onmousemove = stayHome;
  window.onscroll = stayHome;
 
  function insertFloatIMG(){
 
   styleStr = "<Style>.msgFloat {"+absStr+";Border-Style:Solid;Border-Width:1px;Background-Color:Yellow;Padding-Right:5px;Padding-Left:5px;Padding-Top:3px;Padding-Bottom:3px;Font-family:Tahoma;Font-Size:13pt;Line-Height:95%;}</Style>";
 
   divStr = "<DIV class=msgFloat id=isFloat></DIV>"
 
   document.write(styleStr);
   document.write(divStr);
  }
 
  function hideMessage(){
 
   isFloat.style.visibility = 'hidden';
  }
 
  function showMessage(toolTip){
 
   isFloat.style.visibility = 'visible'
   isFloat.innerHTML = toolTip;
  }
 
  function initToolTip(){
 
   insertFloatIMG();
   hideMessage();
  }

</Script>

</Head>

<BODY>

<center>

<a href=javascript:isNext('1/Link1.html') onMouseover="showMessage('This is a message for the first link')" onMouseout='hideMessage()'>First Link</a>

<br>

<br>

<a href=javascript:isNext('1/Link2.html') onMouseover="showMessage('This is a message for the second link')" onMouseout='hideMessage()'>Second Link</a>

<br>

<br>

<a href=javascript:isNext('1/Link3.html') onMouseover="showMessage('This is a message for the third link<br>consisting of 2 lines')" onMouseout='hideMessage()'>Third Link</a>

<br>

<br>

</center>

<Script> initToolTip() </Script>

</BODY>

</HTML>

@SiddanauthorOct 11.2004 — #thanks, those both are great but Kor´s script doesn´t seem to work well with links inside a table, dunno know why and for my purpose, adding a new link every now and often it might get complicated...

and for Warren, super nice with the hower and it is easy to add more and more links with this alt tag feature but....

When I have links both on the left side and the right side of the window the text will either disappear outside on the left side or interfere the right side so the info box shrinks.

So it only seems god when having links in the middle since I might have lot of text.

I´ve tried making a dublicate and perhaps could have 3 or maybe 4 different styles in the future so like every column has its own Y box position...

Perhaps there is an easier way, instead of changing the ID numbers to all the functions, there could be an own style which can be varied inside the "a href" tag, just like the isNext.

So if the box position could have its own style/function which can be more than 1 in one page then it would be super ?

@Warren86Oct 11.2004 — #Siddan:

I believe I understand. It seems to me that maybe all you need to do is create two .js files, toolTip1.js and toolTip2.js. The first would contain the code AS Is, because it works well for left side and middle positioned links. The second would contain Y position info for right side links. You would have to change the function names, for example, showMessage2(toolTip) instead of showMessage(toolTip), etc. Anyway, you have it well in hand, so, good luck with your project.

@SiddanauthorOct 11.2004 — #thanks for your effort, much appreciated

alltho I was lucky to stumble across a site which had an interesting solution and it is very customable to even have pictures and background inside the info box.

what I like about it was that it detects if the right window wall is close so the box flipps to a left align instead

@KorOct 12.2004 — #
but Kor´s script doesn´t seem to work well with links inside a table, dunno know why
[/quote]
becouse I used offsetTop and offsetLeft, which are [b]relative[/b] properties. Ok, for your purposes I used now the second Parent's offset position (which, your case, is the row's position) to establish the "alt" text position.

Furthermore, I used a more dynamicaly reference

document.getElementById('tab').getElementsByTagName('a')

which allows you to add/substract rows/links without indent a parameter. Take care only to have same number of txt arrays elements as links.

Here it is:

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 <html> 
 <head> 
 <title>Untitled Document</title> 
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
 <meta http-equiv="Content-Style-Type" content="text/css"> 
 <meta http-equiv="Content-Script-Type" content="text/javascript"> 
 <style type="text/css"> 
 #altext{ 
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 9px; 
 color: #0000FF; 
 background-color: #FFFFCC; 
 padding: 2px; 
 width: 150px; 
 border: 1px solid #000000; 
 position:absolute; 
 display:none; 
 z-index:10; 
 } 
 </style> 
 <script language="JavaScript" type="text/JavaScript"> 
 var txt= new Array()//set bellow the descriptive text 
 txt[0] = ' Some text here for LINK 1 text text text text bla bla'; 
 txt[1] = ' Another text here for LINK #2 text text text text bla bla'; 
 txt[2] = ' Text here for LINK #3 text text text text bla'; 
 function showA(o){ 
 //sets the txt position according to the link's second Parent(the row) position
 oX=o.offsetLeft+o.parentNode.parentNode.offsetLeft+document.getElementById('tab').offsetLeft; 
 oY=o.offsetTop+o.parentNode.parentNode.offsetTop+document.getElementById('tab').offsetTop;
 oH=o.offsetHeight; 
 a=document.getElementById('tab').getElementsByTagName('a');
 for(var i=0;i<a.length;i++){
 if(o==a[i]){w=i;break}//sets the "index" parameter of the link
 }
 d=document.getElementById('altext'); 
 d.firstChild.nodeValue=txt[w]; //gives value to txt 
 d.style.left=oX; 
 d.style.top=oY+oH; 
 d.style.display='block'; 
 } 
 function hideA(){ 
 document.getElementById('altext').style.display='none'; 
 } 
 </script> 
 </head> 
 <body leftmargin="0" topmargin="0">
 <table border="0" id="tab">
 <tbody>
 <tr>
 <td><a href="#" onmouseover="showA(this)" onmouseout="hideA()">LINK1</a><br><br>
 
 </td>
 </tr>
 <tr>
 <td><a href="#" onmouseover="showA(this)" onmouseout="hideA()">LINK2</a><br><br>
 
 </td>
 </tr>
 <tr>
 <td><a href="#" onmouseover="showA(this)" onmouseout="hideA()">LINK3</a><br><br>
 
 </td>
 </tr>
 </tbody>
 </table>
 
 <div id="altext">&nbsp;</div>
 </body> 
 </html>
 [/code]

Also in #JavaScript _↴

Help problem in coding with VBScript + JavaScript khalid getting element by id

Success!

Help @Siddan spread the word by sharing this article on Twitter...

Tweet This

Alt tag in text links

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Alt tag in text links

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴