StoutLabs

Imagine that you're working on a client site and nearing the launch phase... and the client suddenly requests that all external links have a separate style from internal links.  That's not all - they also want you to give any existing file download links a new style for each type of downloaded file.  Do you panic and throw things?  No!  Just use this easy to implement Mootools class I've written for you...

Here's a quick peek at a simple demo:  View Demo

What You Will Need

• MooTools (1.2 or higher)
• My Link Tweaker class, which you can grab at the end of this post.

How To Use It

Using this couldn't be any easier.  Basically, you just declare an array of elements in your page that you want to parse for links – and then run the class.  (You'll also need to create a few CSS styles, but I'll cover that as well.)

The Javascript

To begin this we need to include our scripts, like always.

<script type="text/javascript" src="js/moo_12.js"></script>
<script type="text/javascript" src="js/sl_linkTweaker.js"></script>

Then, inside a standard 'domready' wrapper, we just declare our array of items in which to parse links and instantiate the class.

window.addEvent('domready', function() {
   
    //for simplicity we'll scan all paragraphs on the page
    var myItems = $$('p');
   
    //fire up the linkTweaker for above items       
    var tweakLinks = new SL_LinkTweaker({
        items: myItems,
        externalLinkClass: 'external',
        autoFileTypes: new Array('zip', 'pdf'),
        classPrefix: 'file_',
        autoStart: true
    });
                 
});

That's all you have to do, really.  There are a few options to help you customize things, here's the entire list:

options: {
items:  null,   
currentServer: '',  
autoExternals: true,  
externalLinkClass: null,  
autoFileClasses: true,  
autoFileTypes: new Array('zip', 'pdf'),  
classPrefix: 'file_',  
autoStart: true 
},

items - This is array of content elements you're passing into the class to scan for links.  (Note: This must be an array of elements, even if it's just a single element.)

currentServer - (Advanced) You can set this to another host location, which can help you when developing locally or on another server.

autoExternals - Boolean (true or false) value to style external links.  Set to false if you don't want external links modified. (Defaults to true)

externalLinkClass - String value of class to add to external links, if above is set to true.

autoFileClasses - Boolean value to style file download links or not.  (Defaults to true)

autoFIleTypes - Array of string values, this array specifies the extensions of file types we want to look for and style.  See demo code if this doesn't make sense. (Defaults to 'zip' and 'pdf' extensions.)

classPrefix - String value of the prefix of the classes we'll add to each file download link. (Defaults to 'file_')

autoStart - Boolean value to start this class automatically upon instantiating.  (You'll probably want to leave this at the default value of true... I'm only using it for the demo.)

The CSS

One last thing you need to do is setup your CSS styles for the classes you're using above.  In my example, I just used a class calld 'external' for adding to my external links.  In my example I also used the 'file_' prefix on all my file download links.  With this in mind, I need to set up these styles.  Here's a quick look at how I did them in the example, but remember you can style your links however you like!

a { color: #cc6600; text-decoration: none; }
a:hover { text-decoration: underline; }

.external { 
color: #bb0077; padding: 1px 18px 1px 2px; 
background: transparent url(icons/link.png) top right no-repeat; }

/* add more file types as needed */
.file_zip { padding-right: 18px; 
background: transparent url(icons/zip.png) top right no-repeat; }
.file_pdf { padding-right: 18px; 
background: transparent url(icons/pdf.png) top right no-repeat; } 

And there you have it, some relief for your sudden predicament. Check out the demo for a working example, and feel free to download the source and use in your projects – both commercial and personal.  No attributions are required for usage, I only ask that you do not re-distribute or sell this code as your own.  I also like seeing where it's being used, so email me links to your projects when they go live... I may end up featuring it in the future!