Значки к ссылкам для документов

Если на вашем сайте есть ссылки на различные виды документов (файлы DOC, PDF, RAR и т.д), то было бы очень полезно информировать посетителей об этом. Данный пример использует только CSS.

Например, мы хотим сделать ссылку на PDF-файл стандартным способом:


<a href="http://webmaster.alexanderklimov.ru/manual.pdf">Ссылка</a>

Добавим несколько стилей CSS:


a[href $='.pdf']
{
    padding-right: 18px;
    background: transparent url(pdf.gif) no-repeat center right;
}

Теперь браузер после каждой ссылки, ведущей на PDF-файл, будет добавлять значок Acrobat Reader.

Ссылка

Тоже самое можно проделать и с другими типами файлов, а также для mailto.

Таблица
Документ Word
Напишите письмо

Рассмотрим теперь варианты для случая с ссылками на всплывающие окна или на другие сайты. Воспользуемся для этой цели классом popup


<a class="popup" href="popup.html">Popup window</a>

Код для класса CSS:


a[class = "popup"]
{
    padding-right: 18px;
    background: transparent url(popup.gif) no-repeat center right;
}

В самом начале мы пишем, что если у какой либо ссылки есть класс «popup» — значит ей необходимо прибавлять значок попапа.

Таким образом можно приделать значок к любой ссылки, просто определив её класс.

Popup Windows

Можно создать стиль для внешних ссылок, используя параметр external

Ссылка на внешний сайт

Код для этого случая будет следующим


a[rel ~='external']
{
    padding-right: 18px;
    background: transparent url(external.gif) no-repeat center right;
}

При желании вы можете усложнить примеры.

Значки к ссылкам для документов

Реклама