/ Ghost

Amazon Links und die data URI

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.