External Site Link Favorite Icons Using MooTools and CSS
I recently came upon an interesting jQuery article about how you can retrieve all external links within a page, build the address of the site's favorite icon, and place the favorite icon along side the link. I've chosen a different approach which uses CSS to position the favorite icon as a background image.
The CSS
.favicon { background-repeat:no-repeat; padding:2px 0 3px 22px; }
This CSS code will provide padding and background image placement for the link.
The MooTools JavaScript
/* when the dom is ready... */
window.addEvent('domready',function() {
/* grab all complete linked anchors */
$$('a[href^="http://"]').each(function(a) {
/* if it's not on the davidwalsh.name domain */
if(!a.get('href').contains(window.location.host)) {
/* get the favicon */
var favicon = a.get('href').replace(/^(http:\/\/[^\/]+).*$/, '$1') + '/favicon.ico';
/* place it in the anchor */
a.setStyle('background-image','url(' + favicon + ')').addClass('favicon');
}
});
});
I've chosen to include the favorite icon as a background image as opposed to the jQuery article's method of injecting an image.
Would you use this method on your website?
Comments
Be Heard!
Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!
This is great, simple and effective, thanks David.
You can also use the new MooTools More URI syntax which also works with base-tags.
window.addEvent(‘domready’,function(){
var baseHost = URI.base.get(‘host’);
$$(‘a[href^="http://"]‘).each(function(a){
var uri = new URI(a);
if(baseHost != uri.get(‘host’)){
var favicon = new URI(‘/favicon.ico’, { base: uri });
a.setStyle(‘background-image’,'url(‘ + favicon + ‘)’).addClass(‘favicon’);
}
});
});
Grat one, even better idea!!! I created something similar adding icon to for all external links using URI subclass http://mootools.net/docs/more/Native/URI
window.addEvent(‘domready’,function() {
var host = window.location.host;
var links = $$(‘a’);
links.each(function(elem,i){
var myURI = new URI(elem.get(‘href’));
var hostExtern = myURI.get(‘host’);
if(hostExtern!=host) {
elem.addClass(‘web’);
}
})
})
Actually, since you’re not using the link URI for anything else you don’t have to create another object.
Just use uri.set(‘value’, ‘/favicon.ico’); Set value will take relative paths.
Nice one David! Simple but very effective!
Cool idea !
As not all website are having a favicon, I added some stuff to check if the favicon is properly loaded.
If not, the background-image should not be changed, and remains the default image I use to indicate external links.
My inner code block looks like this:
var favicon = href.replace(/^(http:\/\/[^\/]+).*$/, ‘$1′) + ‘/favicon.ico’,
img = new Image();
img.onload = function(){
a.setStyle(‘background-image’,'url(‘ + favicon + ‘)’);
}
img.src = favicon; //load it now.
Nice idea, this could be usefull for my next linklist ^^
Complete offtopic: Can you move the site search box to a more prominent place? It took me some time to find it….
Here is a simple step by step tutorials to create your own FAVICON easily on
photoshop cs version.
How to create FAVICON using Photoshop?
really usefull but how can i disable this feature for linked images ???????