External Links
posted on march 9, 2003, tag: site
A few days ago, I made a change to my link colours. Now, every link that will take you to another domain or site is green, while all internal links are the same familiar blue. A few people have asked me how I did it. To put you at ease—I didn't do it by hand. Rather, I used Javascript. It's actually much simpler than you might think. Here's how you do it:
Make sure you have at least two link styles in your style sheet. The blue colour on my site is the default link style (a), and the green colour is called 'ext' (a.ext). Here's the Javascript function you need to put in the head of your document:
function makeExLinks () {
for (var i=0; i<=(document.links.length-1); i++)
if ((document.links[i].target == '_blank') || (document.links[i].target == '_new')) {
if ((document.links[i].className != 'nav') && (document.links[i].className != 'int')) {
document.links[i].className = 'ext';
}
}
}
Okay, here's what the javascript does: It loops through all the links on your page and checks their target values. If it sees a target equals _blank or _new, it changes the link's class to your ext class. Notice this will only work if you have your external links set to open in a new window. If you don't, you can tweak this to work for you, but you won't be able to use it as is.
Notice also that this will change all links with _blank or _new targets to the external colour. If you have internal links (like, say, images that open in a new window), you'll need to add another style to your sheet called 'int' (a.int) that matches your default colour. Then, each time you create one of these links, you'll need to specify the int class. That will keep your internal new window links the proper colour. As you can see in the function, I've also included a check for links with a class of 'nav.' That's because a few of my links in the sidebar open in a new window, but I don't want them to be coloured for ext (and they also can't take on the int colour). Feel free to add more exceptions.
Now, to get this all working, you need to add some code to your body tag, as such:
<body onload="makeExLinks();">
That's it. I know this isn't something for everyone, but I think it adds a little bit of user-friendliness to your links.
Comments
There are 14 comments, comments are closed
n3verm0re on 03/09/2003:
I'm not a big fan of JavaScript, but as long as you're using it to do this why not try something along these lines? I only took a few minutes to throw that together, so I'm sure that there are problems I'm not aware of. The only one that I'm certain of is the fact that it won't properly recognize external links that don't have a preceding http://. However, assuming that your absolute links are proper and specify a leading protocol, the regex should work fine. Maybe I'll improve the expression to account for this in the future.
n3verm0re on 03/09/2003:
Also, you could easily set the target to _blank or _new automatically (if you were so inclined).
n3verm0re on 03/10/2003:
As long as we're on the topic of automatic improval, is there any reason that people aren't fixing the output of their entries to properly indented paragraphs? (This isn't limited to your site, but) As I've noticed, the first line of each of your entries starts out properly indented, but every paragraph after the first is preceded solely by a newline. Granted, I'm an obsessive compulsive bastard and I'm just being anal about a few tabs, but what's the deal?
About a year and a half ago I wrote a PHP method which normalized whitespace in entries (i.e. replaced multiple spaces in between words with a single space "lazy bastard" => "lazy bastard") and wrapped text to a set width using a custom delimiter. I can see the first feature being problematic if you're accustomed to using <code> blocks, but the second feature could be useful. The reason I bring this up is because the function (not mine, just one that wordwraps) has been standard in PHP since 4.0.2. The only problem I see with their method is that it doesn't take HTML tags into account, so you could break apart tag attributes which shouldn't be seperated (i.e. text in the title attribute is fugly if seperated by newlines). My method doesn't handle that either, so I simply disable word wrap and just use the cleanup portion (space normalization and indenting). I'll shut up now.
Garrett on 03/10/2003:
Actually, I'm a huge fan of proper whitespace in source, and if I wasn't using MT, my source would be prettier. When I used to use my own CMS, I had newlines and tabs working for me, properly aligning text. I just never spent the time to properly tune up the source of this version of the website.
That is now going to change. Thanks for the reminder.
Garrett on 03/10/2003:
Actually, this is exactly what I meant by workarounds, but times 100. This is what I was planning to do originally when I thought of this idea, but I found the simplistic route was easier.
But, in hindsight, what you've done (with regexs) is a much smarter approach for people other than me who might not have my ideal situation.
Mind if I offer your script as well in this tutorial (with credit, of course)?
n3verm0re on 03/10/2003:
Since I bothered to write this, I decided to actually use it myself. Consequently, I added the onClick property so that I can open new windows without violating the XHTML 1.0 Strict spec (the target attribute is not defined). I have no plans on posting my own tutorial any time soon, so go right ahead and post my code.
Josh on 03/10/2003:
A problem presented here. Err.. With n3verm0re's at least. If someone uses just their email address on the comments area. The link is the color for on site links. Which really shouldn't be the case since it isn't either. Perhaps another class could be thrown into the mix for email links.
n3verm0re on 03/10/2003:
E-mail links appearing as internal links is perfectly understandable, given the way that both Garrett and my script are setup. It would be trivial to add a third type of link, but I think that doing so is overkill.
n3verm0re on 03/10/2003:
By the way, Garrett, I've decided against letting you include my script with your tutorial. Instead, I'm going to start a little code archive on my own site. That way I can avoid being annoyed when people use my stuff but link you =)
Josh on 03/10/2003:
I fixed it ;] Though the code section is a good idea.
Linus on 03/12/2003:
This technique could be extended a bit to add to the visible contents of the link element. For example, if you want a "»" beside all external links (or your own arrow image):
// ...
document.links[i].innerHTML += ' »';
// ...
It would be nice if it didn't have to be inside the <a></a> tags though... if anyone knows how to do that, it'd be interesting. I think what I described above could also be done with some fancy CSS that I don't understand... :)
n3verm0re on 03/12/2003:
I'm certain that it's possible, but frankly my JavaScript and DOM skills have never been especially strong. My guess would be something along these lines:
1) For external links, set the ID or NAME to something.
2) This is where things get fuzzy. I'm certain that you can lookup named elements with DOM. So do so and hang on to whatever DOM object is returned.
3) Fuzzier still, I'm pretty sure that you can get the parent element of a given DOM node, so getting this would get the element in which our external link is contained.
4) Grab the innerHTML on this parent element and locate the appropriate anchor tag with string manipulation.
5) Slice, dice, stir and fry the innerHTML.
Now for all I know, there might be a built in method that lets you prepend text to a given DOM node. Hopefully someone here has a better understanding of all of DOM's capabilities.
Jen on 04/18/2003:
I happen to like that any a href tags in the comment section are automagically given the attribute. Yay you!