Иконки для ссылок на разные типов файлов
Речь собственно идет о том, чтобы автоматом добавлять к ссылкам на различные типы файлов соответствующие им иконки.
То есть, если ссылка на Word-файл с расширением .doc, то ему справа автоматически добавляется вот такая иконка , а если это какой-либо архивный файл, то к нему прилепится это
О способах добавления иконки на внешние ссылки я уже рассказывал.
Принцип тут тот же. В файле 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, то данный набор правил будет работать для всех архивных файлов с таким расширением, и к такой ссылке будет прилеплена соответствующая картинка.
Вывод очевиден: можно добавить нужную иконку практически к любому типу файлов. Вот небольшой пример, иллюстрирующий работу этих преполезнейших операторов.