Roadsigns for the Information SuperHighway

I find it useful to know where I’m going. I like directions. I also like roadsigns that give some indication of what’s ahead, like

‘ Merging Traffic Merging Traffic Ahead ‘, ‘ RailRoad Crossing RailRoad Crossing Ahead ‘, ‘ this link is a pdf pdf file ‘, or ‘ this link leads offsite External Link ‘.

Haven’t seen those last two? You should, because the Information SuperHighway1, much like our RealLifetm roadways, should display signs to give folks an idea of where they are going.

Now I’ve seen many, many variations on this script, but the version I am using I have based off the work of Marko Dugonjic and adapted it for my own use on this site.

It’s based off using CSS styles to add icons after links that have classes ‘pdfLink’, ‘externalLink’ and so on. Where possible I’ve inserted these classes manually, so if you don’t have Javascript enabled, you’ll still see them, but the beauty of this script is it will iterate through the links on the page and compare the ‘rel’ attribute, as well as the file extension of the link, and add the proper class if you have forgotten to. This comes in very handy with large sites that can’t be easily updated manually.

The icons:

Type Rel Visual Clue Condition
External2 external External Link matches rel or href with ‘http://’ that doesn’t follow with domain name
PDF pdf pdf file Matches rel or href ending in ‘.pdf’
Word documents doc Word .doc type Matches rel or href ending in ‘.doc’
Zipped files zip zipped file Matches rel or href ending in ‘.zip’

The script (You’ll want to set domain to your domain):

The CSS to add to your global stylesheet:

You can extend this to cover other common file extensions on your site, such as Excel files. You are free to use the icons from my site, or create your own. I’ve made the script (css detailed in comments), and the icons available in this handy-dandy .zip file:

1 Pardon the use of such a worn phrase, but it’s an apt analogy for this article.

2 The external link gif included in the zip file is the black one-it’s more in line with the size of the others and would fit into most site better than by smaller, blue one. Feel free to save that one instead if you wish.

Add Your Comment