Helpful Hyperlinks with JavaScript

There you are happily surfing a web site; you click a link and suddenly find yourself at another site being asked to download a file. What happened there? Annoying, isn’t it? There has to be a better way to indicate to your visitors where a link is going and to what type of file. So, to help solve this little annoyance, I’ve written a bit of JavaScript and CSS that adds pretty little icons after the links—depending on the file extension and location—to indicate to the user the type of document they’re about to load.

You can download the code here, and see an example.

The Brief

The main considerations when creating this functionality were:

1. simplicity—it must be easy to use


2. graceful degradation—in the case of CSS or/and JavaScript being disabled


3. minimal use of files—only one JavaScript and one CSS file


4. making it as plug-and-play as possible—so it can be quickly added to a site


5. limiting the overall amount of code


6. compatibility with all modern browsers, including IE6

Why the shift away from a CSS-only solution?

You can already do this in CSS, using attribute selectors. Here’s an example:

a[href$='.doc'] {
 display: inline-block;
 padding-left: 16px;
 background: transparent url(images/icon_doc.gif) center right no-repeat;
}

So why would you do it with a script, when most modern browsers will display the icons using just CSS?

The answer is simple: IE6. All decent browsers support CSS3 attribute selectors … except IE6. This bit of scripting with CSS makes IE6 play nicely; in fact, it even works in IE5.5.

Inspiration and Credit

Before we get started, I’d like to acknowledge the excellent—and free—Silk icons by Mark James at famfamfam, which we’ll be using in this article.

Also, credit where credit is due: this article was inspired by the piece Iconize Textlinks with CSS by Alexander Kaiser, which was in turn inspired by Ask the CSS Guy’s Showing Hyperlink Cues with CSS. In addition, I’ve used a couple of excellent functions written by SitePoint’s very own James Edwards, and a couple more taken from the Core JavaScript Library, written by Kevin Yank and Cameron Adams and immortalized in the SitePoint book, Simply JavaScript.

So how does it work?

Well, in a nutshell: we take all the links in the page, work out the file extension it links to, and then we add the appropriate icon after the link. Nice.

To make it all work, there are three files involved:

1. the HTML page containing the links, index.html


2. the CSS file containing the icon classes, iKonize.css


3. the JavaScript file that adds the CSS classes and icons to the links, iKonize.js

The Quick-Start Method

Now, if you’d like to sidestep the whys and wherefores, and just want to add it to your page, here’s the short version:

1. Add the links to the JavaScript and CSS files in the header of the page (change the file references to suit your site setup).
   <link type="text/css" rel="stylesheet" href="iKonize.css"/>
<script type="text/javascript" src="iKonize.js"></script>


2. Put your icons folder up on your site and make sure the url references are correct in the iKonize.css file.


3. Call the JavaScript function iKonize from a script tag included just before the closing body tag, like so:
   <script type="text/javascript">iKonize();</script>

See—I told you it was simple to use!

For simplicity’s sake, I’ve opted to call the function from within the HTML after the DOM has loaded. There are other ways to achieve this using JavaScript, but they’re beyond the scope of this article.

The Full Explanation

Make yourself comfortable, we’re going to delve into the inner workings.

Configuration

In the spirit of keeping things simple, most of the setup is already done for you. You’ll only have to change the configuration if you need to alter the icons or file extensions. There are two places to make these changes: the JavaScript (iKonize.js), and the CSS file (iKonize.css).

Configure iKonize.js

At the top of the file you’ll see all the configuration variables: classPrefix, classExternal, and classIconLoc.

classPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.

classExternal is the name of the CSS class you want to use to show a link to an external site.

externalIconLoc is the location of the image to use for the external icon.