Автоматическое добавления favicon на исходящие ссылки

В сегодняшнем уроке мы рассмотрим очень интересное решение для Ваших сайтов. С помощью 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>.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.blog.liviuholhos.com
Перевел: Максим Шкурупий
Урок создан: 12 Апреля 2009
Просмотров: 24243
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^