Monday, April 02, 2007

Identify external links in JavaScript

by post@madskristensen.dk (Mads Kristensen) via .NET Slave on 4/2/2007 8:37:52 AM

Many websites have started to add a little icon next to external links, so that visitors know that if they follow it, they will leave the website. Here is a small JavaScript that adds a class called external to all off-site links on the page. Just call the function when the page has loaded.

// Sets a class to all external links
function StyleExternalLinks()
{
 var divs = document.getElementsByTagName("div");
 for (i = 0; i < divs.length; i++)
 {
  var anchors = divs[i].getElementsByTagName("a");

  for (a = 0; a < anchors.length; a++)
  {
   if (anchors[a].href.substring(0,13) != location.href.substring(0,13))
    anchors[a].className += "external";
  }
 }
}

The function searches all DIV tags for links. Now you just need to style the class in order to display the icon.

a.external {
  background: url(../../pics/remote.gif) right top no-repeat;
  padding-right: 9px;
}

Here is an icon you can use  (right-click and Save picture as...).