Sandeep's Nook: JavaScript Page

Link Description Tooltip

This script helps in providing information in the form of a tooltip about link(s). This script can be used for both image links as well as text links as shown in the example below. If you hover the mouse over any of the links, descriptive text about the respective links appears on the page. The descriptive text can be made to appear in any area on the page as per the users needs. In the example the links and text are set in a table. If not required the table can be dispensed with though it is best if the script is set in a table.

Photo Album

For 170+ Free JavaScripts,
A Simple Home Workout,
Quality Quotations,
JS Photo Album,
other links...

Author: Sandeep Gangadharan
Home Page: http://www.sivamdesign.com/home/

The script is given below:

This goes in the HEAD of the html file:

In the script here you can make modifications to the font in which the tooltip appears and its size, colour, etc.

This goes in the BODY of the html file:

In the left cell of the table is the links. Change the text inside the code getDesc( ) to suit your needs. You may add as many links as you want.
The code in the cell on the right should be put where you wish the link description text to appear.

<a href="link4.html"
    onMouseOver="getDesc('4. The link description text goes here.');">
   <font size="2">Link 4</font></a><br /><br />
  </td>
  <td width="220" align="center" valign="top">
     <ilayer id="tipArea1" width="220" height="190">
     <layer id="tipArea1" width="220" height="190">
     <div id="tipArea">
      <p>
       <font face="verdana, arial, helvetica, sans-serif" size="2" color="#000000"><center>
         Change the text here to suit your own needs.
       </center></font>
      </p>
     </div>
     </layer>
     </ilayer>
  </td>
 </tr>
</table>