Отображения подсказок про ссылки с помощью CSS

Сегодняшний урок поведает Вам о том, как сделать вывод красивых иконок рядом с каждой ссылкой на сайте.

На Вашем сайте могут быть сотни ссылок. Некоторые будут вести на другие сайты, некоторые на скачивания вордовских файлов, некоторые на PDF файлы и т.п. Было бы очень полезно информировать Ваших посетителей о том, куда они попадут при нажатии на ссылку. Совсем недавно мы рассматривали пример, который выполнял подобное действие и показывал фавикон внешнего сайта. Данный пример выполнен только на CSS и может быть использован для ссылок в пределах сайта.

Теперь давайте разбираться как все это работает:

HTML: чтобы сделать ссылку на PDF файл нам необходим следующий код

<a href="files/holidays.pdf">Ссылка</a>

Использовав такой код мы просто получим обыкновенную ссылку. Теперь добавим немного магии CSS:

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

Использовав несколько строчек кода мы обучили браузер после каждой ссылки (которая ведет на .pdf файл) добавлять красивую иконку Акробат Ридера. В коде есть также путь к картинке, так что не забывайте его менять, если будете менять расположение картинки.

Тоже самое можно проделать с остальными вариантами: Email = "mailto:", Word = ".doc", Excel = ".xls" и т.д.

Например, тут еще можно добавить картинки к ссылкам на видео и музыку.

Но бывают ситуации, когда не получится указать расширение файла. Например, при добавлении ссылок на всплывающие окна или на другие сайты.

Давайте взглянем на код в таком случае:

<a class="popup" href="help.html">Help Page</a>

Как мы видим тут мы добавили к ссылке класс "popup". Теперь посмотрим на CSS:

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

В самом начале мы пишем, что если у какой либо ссылки есть класс "popup" - значит ей необходимо прибавлять иконку попапа. То есть, таким образом можно приделать иконку к любой ссылке, просто определив ее класс.

Иногда бывает еще сложнее и у ссылки может быть двухсловные классы. Тогда на помощь приходит код:

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

В таком случае будет выбрана любая ссылка, в которой есть класс с упоминанием слова "popup" (может быть часть слова, а может быть одно из нескольких).

На сегодня все! Спасибо за внимание!