Comme vous l'avez peut être remarqué, dans le menu "liens", les urls des sites sont décorées d'une icône. Je vais vous expliquer comment ça marche...
Internet Explorer 6 à introduit la possibilitée d'
associer une icône à un site. Le principe retenu est de simplement placer un fichier favicon.ico à la racine du site. Ce fichier est une icône au format Microsoft de taille 16x16. Les principaux navigateurs ont copiés cette fonctionnalité. Ce système à été adopté par de nombreux sites.
Donc, pourquoi ne pas faire un petit script javascript pour ajouter cette icônes à tous les liens d'une page.
Le principe est simple : on cherche tous les liens dans un calque (voir, dans la page), on extrait les URL (attribut href), puis on crée un image pointant vers le fichier favicon.ico du site.
Pour améliorer un peu le principe, je crée deux images. La première est une image générique (représentant un lien) située sur mon serveur. La seconde est le favicon du site. Elle apparaît cachée par défaut. Dès que l'image favicon.ico est chargée, je cache la première image générique et j'affiche l'image spécifique au site (grâce a une fonction sur son événement onload). Cette astuce me permet d'avoir toujours une icône sur les url, même quand il n'y en a pas pour ce site ou que le site est lent à répondre.
Mais trêve de bavardage, voici le code (il marche avec la librairie
prototype) :
$A($('links').getElementsByTagName('a')).each(function (el) {
var img = $(document.createElement('img'));
img.src = el.href + 'favicon.ico';
img.style.display = 'none';
img.width = '16'
img.height = '16'
img.onload = function() { this.style.display = 'inline'; $(this).previous('img').style.display = 'none'; };
el.insertBefore(img, el.childNodes[0]);
var img2 = $(document.createElement('img'));
img2.src = 'themes/sofresh/img/url.png';
img2.width = '16'
img2.height = '16'
el.insertBefore(img2, el.childNodes[0]);
});
Et voilà, c'est tout...
Pour info, le fait d'utiliser un fichier favicon.ico, bien que supporté par tous les navigateurs, n'est pas standard. Maintenant, le standard spécifie que l'URL du fichier utiliser comme icône doit être spécifié via quelques balises link dans le head.
<link rel="shortcut icon" href="http://example.com/favicon.png" type="image/png" />
<link rel="icon" href="http://example.com/favicon.png" type="image/png" />
Mais cette méthode n'est pas supportée par Internet Explorer 6 (heureusement, il est voué à disparaître). Mais en attendant, heureusement que le web est relativement lent pour adopter les standards, car si c'était le cas, mon script ne marcherait pas...
En attendant, je ne vois pas bien comment rendre mon script compatible avec le standard. Il faudrait pouvoir récupérer la page d'index du site, pour analyser le head à la recherche les balises link. Le problème, c'est que les navigateurs n'aprecient pas trop que l'on aille chercher des infos (avec une requête Ajax par exemple) sur un domaine différent (c'est pour éviter des attaques de type
cross site scripting XSS). Une solution pourrait être d'utiliser un iframe invisible, mais dans ce cas, le problème serait que la totalité de la page du site distant serait chargée par vos visiteurs, ce qui imposerait à vos visiteurs de longs temps de chargement (il faut multiplier ça par le nombre de liens sur la page) et qui consommerai un peut trop de bande passante sur les sites distants (charger toute une page juste pour trouver une icône !)... L'autre solution ne serait plus purement javascript, en utilisant par exemple un script PHP sur le serveur qui se chargerait de récupérer l'icône (et qui au passage pourrait faire du cache)... Bref, on dépasse un peu le cadre du petit script simple à mettre en place ;-)
Deux petites astuces que je viens de trouver pour Ubuntu Feisty :
