It may be useful to your visitors to know which links will take them off of your site without having to hover over all of them. It might also be a nice touch to mark links pointing to PDF documents, for example, with a little Adobe PDF logo. With the help of Javascript and CSS, you can do this pretty simply.

First, we need some Javascript to go through our page and add a CSS class to every link that we want to differentiate.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

// Goes through all links in a page and adds CSS
// classes to them to better style outgoing links,
// PDF links, etc.
function link_classifier() {
  // Get an array of all links in the page
  var links = document.getElementsByTagName( 'a' )

  // These variables will be used later to store
  // the current 'a' object we're working with,
  // and its URI
  var curr_link, uri

  // A regular expression to match URI's ending
  // in 'pdf'
  var pdf_regex = new RegExp( 'pdf$', 'i' )

  // A regular expression to match URI's beginning
  // with 'http://', which we will assume go to
  // other sites
  var outside_regex = new RegExp( '^http://', 'i' )

  for ( var i=0; i<links.length; i++ ) {
    curr_link = links[i]
    uri = curr_link.getAttribute( 'href' )

    // Add a CSS class to PDF links
    if ( pdf_regex.test( uri ) )
      add_class( curr_link, 'pdf' )

    // Add a CSS class to outside links
    if ( outside_regex.test( uri ) )
      add_class( curr_link, 'outside' )
  }
}

// Given some object and a class name, this
// function will append the given class name
// to the CSS class of the object
function add_class( object, class_name ) {
  var old_class = object.getAttribute( 'class' )

  if ( old_class == '' || old_class == null )
    object.setAttribute( 'class', class_name )
  else
    object.setAttribute( 'class', old_class + ' ' + class_name )
}

// Tell the browser to run our link_classifier
// function when the page loads
window.onload = link_classifier()

Now we can style the links based on their class names. You could do whatever you wanted to with them, maybe make all outgoing links bold, whatever. For me, I like having little icons next to outgoing links or other special links. If it’s a PDF document, maybe use an Adobe logo. If it’s an MP3, a little music note. Get creative! Anywho, here’s some CSS for sticking such little logos in after the text of a link:

1
2
3
4
5
6
7
8
9

a.outside {
  background: url('outgoing_link.gif') no-repeat right center;
  padding-right: 11px;
}

a.pdf {
  background: url('pdf.gif') no-repeat right center;
  padding-right: 14px;
}

I set the right padding to be the width of the icon plus 1, so that the icon wouldn’t be pressed right against the text.