JQuery - FaviconLinkMarker - Version 1.0 stable

Variante 1 - CSS - Favicon als Hintergrundbild vor dem Link

das sind externe links google weiterere im text akita, mit 32x32px Favicon Nifty Corner und noch einer Thank you JQuery, ohne Favicon!!!, jetzt intern: olaf mit URL und der home intern relativ

Selector

$("#css-before a").favicon("externer Link:","","","favicon.gif");

erzeugter Code

<span title="externer Link: http://www.google.de/" style="background: transparent url(http://olaf-bosch.de/favicon.gif) no-repeat left center;white-space: nowrap;">
  <a style="background: transparent url(http://www.google.de/favicon.ico) no-repeat left center;padding-left: 19px;" href="http://www.google.de/">google</a>
</span>

Variante 2 - CSS - Favicon als Hintergrundbild nach dem Link

das sind externe links google weiterere im text akita, mit 32x32px Favicon Nifty Corner und noch einer Thank you JQuery, ohne Favicon!!!, jetzt intern: olaf mit URL und der home intern relativ

Selector

    $("#css-after a").favicon("externer Link:","after","","favicon.gif");

erzeugter Code

<span title="externer Link: http://www.google.de/" style="background: transparent url(http://olaf-bosch.de/favicon.gif) no-repeat right center;white-space: nowrap;">
  <a style="background: transparent url(http://www.google.de/favicon.ico) no-repeat right center;padding-right: 19px;" href="http://www.google.de/">google</a>
</span>

Zusatzfeature der Varianten mit CSS

Dieser Bug des IE ist erschlagen:

So sieht es im IE aus mit herkömmlichem CSS

Variante 3 - Favicon als Bild vor dem Link

das sind externe links google weiterere im text akita, mit 32x32px Favicon Nifty Corner und noch einer Thank you JQuery, ohne Favicon!!!, jetzt intern: olaf mit URL und der home intern relativ

Selector

$("#img-before a").favicon("externer Link:","","img","favicon.gif");

erzeugter Code

<span title="externer Link: http://www.google.de/" style="white-space: nowrap;">
  <img style="padding: 0pt 3px; vertical-align: text-bottom;width:16px;height:16px;" src="http://www.google.de/favicon.ico" alt="" />
  <a href="http://www.google.de/">google</a>
</span>

Variante 4 - Favicon als Bild nach dem Link

das sind externe links google weiterere im text akita, mit 32x32px Favicon Nifty Corner und noch einer Thank you JQuery, ohne Favicon!!!, jetzt intern: olaf mit URL und der home intern relativ

Selector

$("#img-after a").favicon("externer Link:","after","img","favicon.gif");

erzeugter Code

<span title="externer Link: http://www.google.de/" style="white-space: nowrap;">
  <a href="http://www.google.de/">google</a>
  <img style="padding: 0pt 3px; vertical-align: text-bottom;width:16px;height:16px;" src="http://www.google.de/favicon.ico" alt="" />
</span>

Variante 5 - Favicon als Bild nach dem Link, per Klasse

Thank you JQuery, ohne Favicon!!!

Selector

$("a.extern").favicon("externer Link:","after","img","favicon.gif");

Zu beachten bei der Bild-Variante (Variante 3-5) - im IE wenn kein Favicon gegeben

So sieht es im IE aus wenn kein Favicon vorhanden

$(document).ready(function () {
 // first used for the TITLE on the link, second "after" for image after, third for img or css,
 // fourth parameter must give a path/to/default.gif at your Domain for favicon fails, 15x15px
 // all Parameters are optional, simplest Example $("#YOURE-ID a").favicon("","","","");
 // you cane use all JQuery-Selectors, $("a.classname") or $("a[@rel=external]") and so on
    $("#css-before a").favicon("externer Link:","","","favicon.gif");
    $("#css-after a").favicon("externer Link:","after","","favicon.gif");
    $("#img-before a").favicon("externer Link:","","img","favicon.gif");
    $("#img-after a").favicon("externer Link:","after","img","favicon.gif");
    $("a.extern").favicon("externer Link:","after","img","favicon.gif");
});

Script anschauen/downloaden