Показываем иконками на что ведёт ссылка

Сотни ссылок ведут на другие сайты, некоторые на скачивания файлов в Word, некоторые на PDF-файлы и т.п. Было бы очень полезно информировать посетителей о том, куда они попадут при нажатии на ссылку.

Приведу пример с использованием ссылки на файл формата .pdf

<a href="file.pdf">Ссылка на PDF</a>

Немного магии CSS:

a[href $='.pdf'] { 
	padding-right: 20px; /* если иконка 16x16 - делаю отступ 4px */
	background: url('ico-pdf.png');
}

Теперь после каждой ссылки на pdf-файл добавляется красивая иконка. Тоже самое можно проделать с остальными вариантами: E-mail = «mailto:», Word = «.doc», Excel = «.xls» и т.д.

Этим методом можно «пометить» ссылку на любой файл, будь-то музыка или видео.

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

<a class="popup" href="file.html">Ссылка на всплывающее окно</a>

И опять немного магии CSS:

a[class ~="popup"] {
	...
}

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

Оставить комментарий: