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.

JTricks.com

Link Annotations

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.

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.

If you like our script, please or at least rate it @ hotscripts.com! Excellent!Very GoodGoodFairPoor