Link Annotations

JavaScriptSource Staff Dec 14, 2007

General

Many sites contain a page with links to other related resources. Generally, a description of each site is not provided, unless the visitor hovers over the TITLE attribute of the ANCHOR tag. The descriptions could be shown on the page, along with the links, but that would make it too cumbersome. This script will show and hide the link's title information right on the page. It could be used in a site map or dynamic menu as well.

Notes

Created by: JTricks.com
Web Site: http://www.jtricks.com/
Posted: December 14, 2007

Be sure to set the ANCHOR tag class in the toggle_titles() function. Then, just place the class in the links you want to use, e.g., class="linkDemo". (You don't need to place it on every link if some do not need a description.)

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: linkAnnotations.js

/* This script and many more are available free online at
   The JavaScript Source!! http://www.javascriptsource.com
   Created by: JTricks.com | http://www.jtricks.com/Licensed under: U.S. Copyright
   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 = 'linkDemo';
  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.
function createTitles() {
  if (document.getElementsByTagName) {
    document.write('<input id="toggle_titles_checkbox" type="checkbox" ' + 'onclick="toggle_titles()">Show link descriptions');
    if (window.addEventListener)
      window.addEventListener("load", toggle_titles, false);
    else if (window.addEvent)
      window.addEvent("load", toggle_titles);
  }
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="linkAnnotations.js"></script>

Body

Paste this code into the BODY section of your HTML document


<script type="text/javascript">
<!--
  createTitles();
//-->
</script>
<ul>
  <li><a href="http://www.webdeveloper.com/" class="linkDemo" title="Check out these great forums!">Web Developer</a></li>
  <li><a href="http://www.javascriptsource.com/" class="linkDemo" title="Over 2,500 scripts for you to use ... free!">JavaScript Source</a></li>
  <li><a href="http://www.webreference.com/">WebReference.com</a></li>
</ul>

Leave a Response

(1 comment)

Thanks!![br /][br /]for[br /]quick response, help, and affirmative service.

Bipin Kumar Dec 31, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details