Иконки для ссылок на разные типов файлов

iconforfile.gif

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

То есть, если ссылка на Word-файл с расширением .doc, то ему справа автоматически добавляется вот такая иконка doc.png, а если это какой-либо архивный файл, то к нему прилепится это zip.png

О способах добавления иконки на внешние ссылки я уже рассказывал.

Принцип тут тот же. В файле CSS прописываются несколько дополнительных правил для ссылок. Но не просто так, а с добавлением парочки интересных операторов ^ и $.

Первый означает «старт с», то есть показывает, с какой песни начинается пьянка. Например, такая запись:

a[href^="http://"]

означает, что данный набор правил будет относиться ко всем ссылкам, начинающимся с префикса http. В указанной выше статье я уже об этом рассказывал. Нам остается только задать нужную иконку в качестве бэкграунда (фона) для таких ссылок. Вот полный код этого набора правил:

a[href^="http://"] {
background: url(link.png) no-repeat 100%;
padding: 0 20px 0 0;
}

Этот код означает, что для всех внешних ссылок, начинающихся с префикса http, будет добавлена в качестве фона иконка external.png.

Другой оператор — $ означает «закончить с». Следующая запись:

a[href$='.zip']

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

Вывод очевиден: можно добавить нужную иконку практически к любому типу файлов. Вот небольшой пример, иллюстрирующий работу этих преполезнейших операторов.

Похожие записи:

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