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