Всем привет! Сегодня верстал некоторые элементы с сайта вк и наткнулся на одной из страниц на как мне показалась интересное решение
вывод формата файла загруженного на сайт
И решил сделать такое же для сайта системы uCoz потратив немного времени на раздумия над способом реализации данного решения я пришёл к тому что такое можно сделать на чистом css об этом способе и пойдёт речь в данном материале
Сразу скажу что в данном примере я покажу пример для некоторых форматов
Пример вида
Установка
Установка очень проста! скопируйте код ниже и добавьте его в вашу таблицу стилей в самый конец
Код
a.iconFile[href $='.rar'], a[href $='.zip'] {
padding-left: 35px;
padding-right: 10px;
background: url("../img/doc_icons.png") no-repeat;
background-position: 0 -30px;
display: inline-block;
line-height: 30px;
}
a.iconFile[href $='.txt'] {
padding-left: 35px;
padding-right: 10px;
background: url("../img/doc_icons.png") no-repeat;
background-position: 0 0px;
display: inline-block;
line-height: 30px;
}
a.iconFile[href $='.png'] {
padding-left: 35px;
padding-right: 10px;
background: transparent url("../img/doc_icons.png") no-repeat;
background-position: 0 -60px;
display: inline-block;
line-height: 30px;
}
a.iconFile[href $='.mp3'] {
padding-left: 35px;
padding-right: 10px;
background: url("../img/doc_icons.png") no-repeat;
background-position: 0 -90px;
display: inline-block;
line-height: 30px;
}
a.iconFile[href $='.avi'] {
padding-left: 35px;
padding-right: 10px;
background: url("../img/doc_icons.png") no-repeat;
background-position: 0 -120px;
display: inline-block;
line-height: 30px;
}
a.iconFile[href $='.pdf'] {
padding-left: 35px;
padding-right: 10px;
background: url("../img/doc_icons.png") no-repeat;
background-position: 0 -150px;
display: inline-block;
line-height: 30px;
}
a.iconFile[href $='.doc'] {
padding-left: 35px;
padding-right: 10px;
background: url("../img/doc_icons.png") no-repeat;
background-position: 0 -180px;
display: inline-block;
line-height: 30px;
}
Если тут нет формата который вам нужен то добавьте его по примеру выше так же не забудьте изменить картинку которую нужно выводить возле ссылки
[href $='.doc'] = Формат файла
background: url("../img/doc_icons.png") no-repeat; = Иконка формата
Так же скажу что данный пример написан для всех ссылок у которых есть класс
.iconFile можно сделать и для всех ссылок на сайте просто в коде выше удалите класс
Ну и теперь пример кода ссылки
Код
<a href="http://talantlev.ucoz.ru/_ld/0/waak.rar" class="iconFile">Архив .rar</a>
<a href="http://talantlev.ucoz.ru/_ld/0/waak.zip" class="iconFile">Архив.zip</a>
<a href="http://talantlev.ucoz.ru/_ld/0/waak.txt" class="iconFile">Текстовый .txt</a>
<a href="http://talantlev.ucoz.ru/_ld/0/waak.png" class="iconFile">Картинка .png</a>
<a href="http://talantlev.ucoz.ru/_ld/0/waak.mp3" class="iconFile">Музыка .mp3</a>
<a href="http://talantlev.ucoz.ru/_ld/0/waak.avi" class="iconFile">Видео .avi</a>
<a href="http://talantlev.ucoz.ru/_ld/0/waak.pdf" class="iconFile">Книга .pdf</a>
<a href="http://talantlev.ucoz.ru/_ld/0/waak.doc" class="iconFile">DOC</a>
Если вы хотите использовать данный пример на странице материала и комментариев к нему то вам подойдёт такой код
Код
<a href="$FILE_DIRECT_URL$">Название ссылки</a>
Теперь скачайте архив и залейте
картинку к себе на сайт в папку
img На этом всё!
waak 
web_master 
