<script type="text/javascript">
  $(function() {
    $("a:not([href^='http://www.phototimes.net'])").attr("target", "_blank").addClass("external-link");
  });
</script>

This little snippet does several things all at once. The first thing it does is find all links whose href  attribute does not begin with http://www.phototimes.net.  This selects links that are off-domain, which we want to open in a new window.  The next part sets the target attribute of the link to _blank, so that it will open in a new window, and the third part adds the external-link class to the tag.  The external-link class allows us to style the link differently that other links on the site, like adding one of those nifty little arrows that visually indicate that the link is offsite, and was popularized by Wikipedia.  jQuery, I think I love you.

<a href="http://some.domain" target="_blank">Clicky!</a>

So what does one do if you still want to open a link in a new window while still maintaining the integrity of your XHTML document? There have been many proposed solutions to this, but they basically devolve to two basic theories: 1) Use javascript to make it work; and 2) Extend the DTD to reinclude the old target attribute. I tend to agree more with using javascript to make it work. Please don’t misunderstand. In an ideal world, extending the DTD would be awesome. Afterall, extensibility is part and partial to the whole XHTML idea. But in practice, I fear this would introduce too many interoperability issues between browsers.

So in order to open links in new windows you mark the tag as an “external” link using the rel tag, like this:

<a href="some.domain" rel="external">Clicky!</a>

Most articles I’ve read have been similar to the SitePoint article I linked to earlier, in that they use javascript like this to make any link tag with a rel attribute of “external” open in a new window:

<script type="text/javascript">
  function externalLinks() {
    if (!document.getElementsByTagName) return;
    var anchors = document.getElementsByTagName("a");
    for (var i=0; i<anchors.length; i++) {
      var anchor = anchors[i];
      if (anchor.getAttribute("href") &&
        anchor.getAttribute("rel") == "external")
          anchor.target = "_blank";
    }
}
window.onload = externalLinks;
</script>

Enter jQuery. I’ve recently grown quite fond of this javascript framework. It’s elegant and powerful. While the above code is simple and straightforward, I’m already using jQuery, so why not just let it do the heavy lifting? We code it this way:

<script type="text/javascript">
  /* Reflects jQuery 1.3 syntax */
  $(function(){
    $("a[rel='external']").attr("target", "_blank");
  });
</script>

And in this manner, bliss is attained :-) Enjoy!