Creare lista link esterni con Favicon

Creare una lista di link esterni utilizzando le Favicon dei rispettivi siti web, può essere una soluzione efficace e professionale. Il tutto gestito in modo automatico da una piccola funzione JavaScript. Vediamo come funziona…

HTML

Il codice HTML rappresenta un semplice susseguirsi di link rappresentati con il tag <a> ed il relativo link <a href=http://www.nomesito.it>Nomesito </a>.

<a href=http://github.com>GitHub</a>
<a href=http://css-tricks.com>CSS-Tricks</a>
<a href=http://www.google.com>Google</a>
<a href=http://jsfiddle.net/chriscoyier/6Vg7t/3/>JSfiddle</a>
<a href=http://www.google.com:80>Google</a>
<a href=http://doesnotexistsreallyreallyreally.com>Nope</a>
<a href=http://127.0.0.1>localhost</a>

Quello che faremo con il codice CSS e JavaScript, comprenderà l’estrazione dei relativi link e l’inserimento di tali link in una nuova funzione che estrarrà in automatico la Favicon relativa.

CSS

Il codice CSS è molto semplice ed indica solo lo stile dell’elemento <a>.

/*
Orig via http://jsfiddle.net/csswizardry/yqdFe/
*/

a { display: block; text-decoration: none; padding: 5px; }

wefwe

JAVASCRIPT

Allo stile dell’elemento <a>, la funzione sottostante aggiunge un parametro background: url(http://g.etfv.co/ + link nomesito ) left center no-repeat;. In questo modo viene ricercata la favicon tramite uno speciale link ed il tutto viene inserito come background nello stile dell’elemento <a>.

$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(http://g.etfv.co/" + this.href + ") left center no-repeat",
        "padding-left": "20px"
    });
});

In particolare la funzione nel primo rigo specifica che ad ogni elemento <a> con proprietà href=http, va applicata una modifica al codice CSS che viene specificata al rigo 3 e 4.

Cosa ne pensate di questa funzione? Vi ha interessato?