Specs:
- filter external links (check the hostname)
- filter links marked as
rel="external" - filter links in image maps (
area) as well - text links only (do not contain
img,divormailto): add CSS class.externalproviding an additional icon - open external links in new window/tab
The code (jQuery):
$(document).ready(function(){
$('a, area').filter(function() {
return this.hostname && (this.hostname).split(":")[0]
!== (location.hostname).split(":")[0]
|| $(this).attr('rel') == 'external';
})
.not(':has(img, div, mailto)')
.addClass('external')
.end()
.click(function(e) {
open(this.href);
e.preventDefault();
});
});
Notes:
- Why not mark external links containing
images,divormailtowith CSS class.external? This is because we want to add the icon to pure text links only. Links containing images or whatever kind of block elements may disturb the site layout if an additional icon would be added. - Use
rel="external"to force opening a link in a new window/tab.
CSS providing an icon
for external links marked with class .external:
a.external {
background-image: url(icon_external.png);
background-position: right top;
background-repeat: no-repeat;
padding-right: 11px;
zoom: 1; /* IE */
}
(Inspired by Karl Swedberg at learningjquery.com.)
DECAF° blog für digitale kommunikation

Kommentar hinterlassen // RSS-Feed mit Kommentaren zu diesem Beitrag
2 Kommentare
1
Robert
Dirk,
care to explain why you chose to capture the ‘click’ event and let it perform the (as far as I can see) default off-the-shelf event behaviour? I fail to see the need for this part:
.end().click(function(e) {
open(this.href);
e.preventDefault();
});
2
Dirk Schürjohann (Autor)
Robert, thanks for your feedback. I’m not sure how to handle your question: You don’t ask for a technical explanation, right? You’re focussing on the theory part of whether to force opening external links in new windows/tabs vs. letting the user deal with the targets?
Kommentar hinterlassen