Here is a very simple tutorial on how you can automatically insert an icon image after external (also known as off-site) links by using jQuery javacript framework.

For those who are not familiar with jQuery:

jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released January 2006 at BarCamp NYC by John Resig.

Description of jQuery quoted from Wikipedia.

Reason I choose to go with javscript implementation instead of pure CSS is so that you do not have go through your entire blog to specified every link that you want to be marked as external link – leave this job to computer!

(Note: You also able to achieve this automatically using CSS3 selector, however CSS3 implementation is still in draft and is still not fully supported by browsers.)

I will be using jQuery 1.3.2, the latest version to-date. Add the follwing javscript to your page:

This javascript selects anchors that has target=”_blank” attributes on them and gives those anchors a new class “external_icon”.

Next step would be applying style to those anchors with “external_icon” class:

a.external_icon {
	background: url(images/external-link.gif) no-repeat 100% 50%;
	padding-right: 12px;
}

That’s it! 2 steps, very simple as promised. However couple of things you may want to watch out for. Below is couple of tweaks you may consider adding.

Image Exception

Having a small external link icon next to an image looks worse than without it, you may examption to anchored images by:

Specified Anchor Exclusion

If there are certain links in the post that you feel like not having an external link icon and want to exclude them from applying the style, then specified a “no_external_icon” class to those links and have your javascript code as follow:

Now you have it! Try the code out yourself!

Edit on 2009-05-12:

Thanks to J Mehmett for pointing out that target="_blank" is invalid in XHTML 1.0 Strict (however remain valid in XHTML 1.0 Transitional and HTML 4.01 Transitional as target attribute is not yet deprecated).

In that case:

Specified Relationship Inclusion

Advanced web developers has slowly stop the usage of target and using rel attribute instead.

Without too much trouble, we can achieve the same result by using above!