Javascript Tricks, Samples, Tutorials & Howtos

New versions notifications available via

Follow jtricksdotcom on Twitter
/ JTricks.com / Navigation / Link Annotations
Last updated: 05 Jan 2006
Link Annotations
Many sites contain a page with links to other related resources. Such a page has to provide descriptions of linked pages in some way. While the TITLE attribute of the ANCHOR tag can be used to offer additional description to the link, the visitor will have hover the mouse pointer over each link to select a page to visit.

The descriptions could be shown on the page beside the links, but it will make the list significantly longer and too cumbersome for the people visiting second time.

The DHTML script on this page will allow to show and hide the links title information straight on the page through one mouse click. It could be used in site map or dynamic menus as well.
Script demonstration
JTricks.com
Link Annotations
Script source code
To use the script perform the following steps:

  • Mark the links you need annotations for with a style class;
  • Insert the following code to the place where you want the checkbox to appear, changing anchorClassName to the actual class selected in previous step (or put in separate file and reference it):
<script type="text/javascript"><!--
/* Script by: www.jtricks.com
 * Version: 20060105
 * Latest version:
 * www.jtricks.com/javascript/navigation/annotations.html
 */
// Adds DIV tags containing the ANCHORs' titles
function add_titles(cls)
{
    var as = document.getElementsByTagName('a');
    var i = 0;

    // Traverse all the ANCHOR tags
    while (i < as.length)
    {
        var a = as.item(i);
        i++;

        // Check if the tag's class is what we have to alter.
        if (a.className != cls)
        {
            continue;
        }

        // Check if the next DIV already contains the title
        if (a.nextSibling &&
            a.nextSibling.nodeName == 'DIV' &&
            a.nextSibling.firstChild &&
            a.nextSibling.firstChild.nodeName == '#text' &&
            a.nextSibling.firstChild.nodeValue == a.title)
        {
            continue;
        }


        var title = document.createElement("div");
        title.appendChild(document.createTextNode(a.title));

        a.parentNode.insertBefore(title, a.nextSibling);
    }
}

// Removes DIV tags containing the ANCHORs' titles
function remove_titles(cls)
{
    var as = document.getElementsByTagName('a');
    var i = 0;

    // Traverse all the ANCHOR tags
    while (i < as.length)
    {
        var a = as.item(i);
        i++;

        // Check if the tag's class is what we have to alter.
        if (a.className != cls)
        {
            continue;
        }

        // Remove the next DIV containing the anchor title
        if (a.nextSibling &&
            a.nextSibling.nodeName == 'DIV' &&
            a.nextSibling.firstChild &&
            a.nextSibling.firstChild.nodeName == '#text' &&
            a.nextSibling.firstChild.nodeValue == a.title)
        {
            a.parentNode.removeChild(a.nextSibling);
        }
    }
}

function toggle_titles()
{
    // !!!!  Change this to actual ANCHOR tag class  !!!!
    var anchorsClassName = 'test';

    var box =
        document.getElementById('toggle_titles_checkbox');

    if (box.checked)
        add_titles(anchorsClassName);
    else
        remove_titles(anchorsClassName);
}

// Handle the old user agents - no checkbox
// will appear if the user agent doesn't support DOM2.
if (document.getElementsByTagName)
{
    document.write(
        '<input id="toggle_titles_checkbox" type="checkbox" ' +
        'onclick="toggle_titles()">Show link titles');

    if (window.addEventListener)
        window.addEventListener("load", toggle_titles, false);
    else if (window.addEvent)
        window.addEvent("load", toggle_titles);
}

//--></script>
  • Be sure to verify page design with the Javascript turned off as the checkbox will not appear.
Browser compatibility
The javascript snippet above was tested on the following user agents:

Modern Firefox 1.5 Ok.
Firefox 1.0.x Ok.
Opera 8.01 Ok.
Steam age Internet Explorer 6.0 Ok.
Ancient stuff Netscape Navigator 4.79 Downgrades gracefully - checkbox is not shown.
No Javascript or
Javascript turned off
Any Downgrades gracefully - checkbox is not shown.
Donations and Script Rating
If you like our script, please
or at least rate it @ hotscripts.com!