В сегодняшнем уроке мы рассмотрим очень интересное решение для Ваших сайтов. С помощью jQuery мы сможем возле каждой ссылки, которая ведет на другой сайт, показать favicon того сайта (если он существует).
Кто не знает, что такое favicon, ниже представлена картинка с его демонстрацией:
Для осуществления поставленной задачи нам понадобиться следующий код:
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.favicons.js" type="text/javascript"></script>
Этот код необходимо поместить между тегами <head></head>. Как Вы видите, мы просто подключаем два внешних javascript файла, которые и делают всю работу. Первый файл - это непосредственно сам фреймворк jQuery. Второй - функция, которая делает всю работу.
Все файлы можно скачать
тут.
Еще, для того, чтобы результат выглядел более красиво, я добавил стиль, который убирает рамку вокруг favicon:
<style type="text/css">
a img {
border: none;
}
</style>
Favicon добавляется только на внешние ссылки. На внутренние и на сайты без favicon ничего не добавляется.
Чтобы данная функция работала, ссылки необходимо оформлять как обычно через тег <a>.