Skip to navigation

malevolent design weblog

This blog is now defunct, but you can find more stuff over at my personal site

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 ( External link icon: upward triangle ) in a few sites, but for this one turned it into something resembling the traditional eject symbol ( External link icon: 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 ( External link icon: smaller eject symbol ). 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);
	}
}

Comments


Comments are now closed for this entry.