Finishing Touches: External Links

This is the first in a series of entries about some of the little details I’ve put into this site. Feel free to comment on either the implementation or simply whether they’re worth bothering with.

---

Presenting external links differently from those linking within the site is an idea that’s been around for years. Some have used different colours, different font weight, or different types of underline (e.g. solid vs. dotted), but like many others I decided on an icon.

The icon

I’ve used a simple upward-pointing triangle ( ) in a few sites, but for this one turned it into something resembling the traditional eject symbol ( ), as seen in everything from most tape decks to OS X. It seemed vaguely appropriate (as the user is leaving the site), but I might go back to the plain triangle if it proves misleading.

Once this weblog was added, it became clear that the icons cluttered up pages featuring lots of external links, so it was made smaller and fainter ( ). It can still be intrusive, but I think it’s OK and works well across the site as a whole.

Adding it

Mozilla-based browsers support 3 CSS features which allow the icons to be inserted automatically:

Substring matching attribute selectors

This lets you apply styling to tags based on attribute values, e.g. a[href^="http://www.malevolent.com/"] would select all links with an href that starts with http://www.malevolent.com/

The ‘content’ property

Various types of content can be generated using this property.

The :before and :after pseudo-elements

These are used to add content at the start or end of an element’s content, e.g. p:after {content:"(IMHO)"} would put ‘(IMHO)’ after every paragraph.

This site uses something similar to:

#content a[href^="http:"]:after
{
	content:url("/_template/img/icons/external2.gif");
}
#content a[href^="http://www.malevolent.com/"]:after
{
	content:"";
}

The first bit adds the icon for any absolute hrefs within the content area, the second removes it for any which happen to be pointing back to this site.

I’m currently inserting the style rules via JavaScript, as substring matching attribute selectors are only proposed for CSS 3 and I want the site to validate against CSS 2. Yeah I know, that’s cheating, and I’m doing the same to use some other browser-specific cosmetic features, but I reckon the hackiness is worth it. (I’ve changed my mind and now opted for invalid CSS rather than inserting rules via JavaScript)

Internet Explorer doesn’t have such advanced CSS support, and so some JavaScript loops through all the links using code similar to this in a function called at the foot of the page:

var thisServer = window.location.protocol+'//'+window.location.host;
var links = document.getElementById('content').getElementsByTagName('a');
for (var i = 0; i < links.length; i ++)
{
	linkHref = links[i].getAttribute('href');
	if ( (linkHref.indexOf(thisServer) != 0) && (linkHref.indexOf('http://') == 0) )
	{
		newImg = document.createElement('img');
		newImg.setAttribute('src','/_template/img/icons/external2.gif');
		newImg.setAttribute('alt',' [external link]');
		newImg.setAttribute('title','external link');
		links[i].appendChild(newImg);
	}
}

Wed 22nd Dec 2004, 11:50pm GMT (updated Thu 10th Feb 2005, 9:07pm GMT)

Filed under: Client-side Coding, Hints and Tips, Web

---

Comments

Comments are now closed for this entry.