Add Icons to External Links with Mootools and CSS
A trend going on around on websites are putting icons on links that point to web pages externally. If you want that on your site, this simple script will dynamically take care of that for you with the help of Mootools, a compact Javascript Framework and some CSS.
Javascript
window.addEvent('domready',function() {
$$('a').each(function(link) {
if(link.hostname != window.location.host) {
link.addClass('external');
}
});
});
CSS
.external {
background: url('/images/external.png') 100% 60% no-repeat;
padding: 0 15px 0 0;
}
You can copy and paste the Javascript and CSS above. Just make sure that you point the .external rule to point the background to the correct external icon.
View the demoCategories: How To, Web Development
Tags: javascript, mootools
4 Comments
Mario
I found this site through catswhocode.com. Nice site. Nice tutorials.
December 1st 2009
Jason Huebel
Anybody have an example based on jQuery?
December 26th 2009
Taylor Satula
Or you could do it without mootools like this. But great tut anyway
a[icon ^=“out”] {
padding-right: 20px;
background: transparent url(/external.gif) no-repeat center right;
}
March 2nd 2010
Royal
That’s a neat trick. Thanks for sharing this Mootools tip.
November 17th 2009