Roadsigns for the Information SuperHighway

Published by Sara Jacobson
Jun 5, 2006 03:19 AM Scripts

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 ‘, ‘ RailRoad Crossing ‘, ‘ this link is a pdf ‘, or ‘ this link leads offsite ‘.

Haven’t seen those last two? You should, because the Information SuperHighway¹, much like our RealLife^tm 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
External²	external		matches rel or href with ‘http://’ that doesn’t follow with domain name
PDF	pdf		Matches rel or href ending in ‘.pdf’
Word documents	doc		Matches rel or href ending in ‘.doc’
Zipped files	zip		Matches rel or href ending in ‘.zip’

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

function fileLinks() {
var fileLink;
if (document.getElementsByTagName(‘a’))
{
for (var i = 0;
(fileLink =
document.getElementsByTagName(‘a’)[i]);
i++)
{
if (fileLink.href.indexOf(’.pdf’) != -1) {
fileLink.setAttribute(‘target’,
‘_blank’);
fileLink.className = ‘pdfLink’;
}
if (fileLink.href.indexOf(’.doc’) != -1) {
fileLink.setAttribute(‘target’,
‘_blank’);
fileLink.className = ‘docLink’;
}
if (fileLink.href.indexOf(’.zip’) != -1) {
fileLink.setAttribute(‘target’,
‘_blank’);
fileLink.className = ‘zipLink’;
}
if (fileLink.rel.indexOf(‘external’) != -1) {
fileLink.setAttribute(‘target’,
‘_blank’);
fileLink.className = ‘externalLink’;
}
}
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’)
{
window.onload = func;
} else
{
window.onload = function()
{
if (oldonload) { oldonload(); }
func();
}
}
}
addLoadEvent(fileLinks);

The CSS to add to your global stylesheet:

.externalLink {
padding-right: 19px;
background: url(”/images/externalLink.gif”) 100% 50%
no-repeat;
}
.pdfLink {
padding-right: 19px;
background: url(”/images/pdfLink.gif”) 100% 50%
no-repeat;
}
.docLink {
padding-right: 19px;
background: url(”/images/docLink.gif”) 100% 50%
no-repeat;
}
.zipLink {
padding-right: 17px;
background: url(”/images/zipLink.gif”) 100% 50%
no-repeat;
}

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: fileLinks.zip

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

² 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.