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

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, то данный набор правил будет работать для всех архивных файлов с таким расширением, и к такой ссылке будет прилеплена соответствующая картинка.

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

29.03.2010

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

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

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

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