Adding an Icon to External links using Mootools
Some usability websites have said that adding a certain image or indicator for links linking outside your domain should be done. I really don't know but as part of regularly modifying this blog, I decided to add this as well.
Learning jQuery posted a script for this using jQuery. David Walsh also posted something similar. However, what I did was to push it further and write up class for the same purpose.
var external = new Class({
initialize: function(links) {
this.links = $$(links);
this.attach();
},
attach: function() {
this.links.each(function(link){
if (!link.get('href').contains(window.location.host)) {
link.addClass('external');
}
});
}
});
Usage
new external('a');
CSS declaration
.external {
background: url('/images/external.png') 100% 60% no-repeat;
padding: 0 15px 0 0;
}
Categories: How To, Web Development
Tags: javascript, mootools
No Comments