Wie bei Wikipedia-Links würde ich auch gerne Amazon-Links als solche kennzeichnen. Hier vielleicht sogar noch relevanter, immerhin ist das Werbung. Zunächst also habe ich die Methode, die Klassen zu Links hinzufügt erweitert:
function linkClassifications() {
$('a[href*="wikipedia.org"').each( function() {
$(this).addClass('wikipedia');
});
$('a[href^="http://www.amazon"').each( function() {
$(this).addClass('amazon');
}
}
Das Icon, das ich verwende, ist auch als Data-Url verfügbar, die direkt in CSS oder HTML verwendet werden kann. In meinem Fall wieder in der links.css
und schaut etwa so aus:
a.amazon {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAGhklEQV
(... etwa 30 Zeilen Buchstabensuppe ...)
+sn8PL39UXfqTZ6lt4M6pMFo6qOGlv3pxveEofFPK0vI2idnaB8AAAAASUVORK5CYII=)
center right no-repeat;
background-size: 16px 16px;
padding-right: 18px;
important!;
}
So weit, so unleserlich. Das Ganze ist nicht anderes als das Icon in Base64-Codierung. Im Wikipedia-Artikel sind auch ein paar Vor- und Nachteile aufgelistet. Auf wundersame Weise (und mit dem richtigen Browser) ist nun zum Beispiel der Link zu diesem lesenswerten Buch über Unit-Testing mit dem Amazon-Icon gekennzeichnet.