Добавляем значок favicon к ссылкам

Рассмотрим интересный прием, предложенный Liviu Holhos в своем блоге (Add a favicon near external links with jQuery). С помощью jQuery мы сможем добавить значок favicon.ico к ссылке на другой сайт (если он существует).

Для реализации этой задачи потребуется следующий код:


jQuery(document).ready(function(){jQuery(‘a[href^="http://"]‘).filter(function(){return this.hostname && this.hostname !==<br />
location.hostname;}).each(function(){var link=jQuery(this);link.addClass(«favicon_link»);var faviconURL=link.attr(«href»).replace(/^(http:\/\/<br />
[^\/]+).*$/,»$1″)+»/favicon.ico»;var faviconIMG=jQuery(‘<img class=»favicon_image» src=»http://www.liviuholhos.com/images/blank.gif» alt=»"<br />
/>’)["appendTo"](link);var extImg=new Image();extImg.src=faviconURL;if(extImg.complete){faviconIMG.attr(«src»,faviconURL);}else<br />
{extImg.onload=function(){faviconIMG.attr(«src»,faviconURL)}}})});

Этот код для удобства сохраним в отдельном файле jquery.favicons.js и далее подключаем внешние файлы между тегами head следующим образом.


<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="jquery.favicons.js"></script>

Теперь, если на вашей странице встречается тег <a>, то вы увидите нужный значок.

Сайт для программистов
Google
Wikipedia
Яндекс

Обратите внимание, что значки favicon.ico добавляются только к внешним ссылкам. К внутренним ссылкам ничего не добавляется. Также ничего не будет добавлено, если у сайта нет значка.

Можно также убрать рамку вокруг значка:


<style>
a img
{
   border: none;
}
</style>

Добавляем значок favicon к ссылкам

Реклама