Приветствую Вас Прохожий | RSS Суббота, 10.12.2016, 17:34
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 15
Гостей: 13
Пользователей: 2
sergaw, MaDaRa



Главная » Файлы » Скрипты для uCoz » Скрипты Разное

Стилизация ссылок сайта для определенных форматов файлов

Стилизация ссылок сайта для определенных форматов файлов CSS, стилизация, ссылок
Суть очень проста, мы просто добавим к ссылка необходимые иконки форматов файла который за ней скрывается, будь это .rar .zip .jpg .pdf и другие. Теперь вопрос, а как заставить браузер узнать что содержится за той ссылкой без помощи сторонних скриптов? Очень просто, сейчас я покажу как.

HTML

Создадим секцию с ссылками в которых лежат адреса к разным форматам файла

Код
<section class="links">  
  <a href="http://site.ru/file.rar">Под ссылкой файл c форматом .rar</a>  
  <a href="http://site.ru/file.zip">Под ссылкой файл c форматом .zip</a>  
  <a href="http://site.ru/file.jpg">Под ссылкой файл c форматом .jpg</a>  
  <a href="http://site.ru/file.pdf">Под ссылкой файл c форматом .pd</a>  
  <a href="http://site.ru/file.doc">Под ссылкой файл c форматом .doc</a>  
  <a href="http://site.ru/file.txt">Под ссылкой файл c форматом .txt</a>  
  <a href="http://site.ru/file.xml">Под ссылкой файл c форматом .xml</a>  
  </section>


CSS

А теперь перейдем к css и пропишем то необходимое

Код
a[href$=".rar"], /* rar ссылка */  
a[href$=".zip"], /* zip ссылка */  
a[href$=".jpg"], /* jpg ссылка */  
a[href$=".pdf"], /* pdf ссылка */  
a[href$=".doc"], /* doc ссылка */  
a[href$=".txt"], /* txt ссылка */  
a[href$=".xml"] /* xml ссылка */  
{  
  padding-left: 22px; /* Отступ от ссылки слева */  
}  

a[href$=".rar"] { /* Фоновая иконка для файла rar */  
  background: url('../img/file-rar.png') left center no-repeat;  
}  

a[href$=".zip"] { /* Фоновая иконка для файла zip */  
  background: url('../img/file-zip.png') left center no-repeat;  
}  

a[href$=".jpg"] { /* Фоновая иконка для файла jpg */  
  background: url('../img/file-jpg.png') left center no-repeat;  
}  

a[href$=".pdf"] { /* Фоновая иконка для файла pdf */  
  background: url('../img/file-pdf.png') left center no-repeat;  
}  

a[href$=".doc"] { /* Фоновая иконка для файла doc */  
  background: url('../img/file-doc.png') left center no-repeat;  
}  

a[href$=".txt"] { /* Фоновая иконка для файла txt */  
  background: url('../img/file-txt.png') left center no-repeat;  
}  

a[href$=".xml"] { /* Фоновая иконка для файла xml */  
  background: url('../img/file-xml.png') left center no-repeat;  
}


Теперь расскажу суть. Весь фокус в a[href$=".rar"], в знаке $ после href, этот знак означает все ссылки на конце которых .rar либо другие слова которые вы укажете.

Ну а теперь дополню следующее, эффект будет работать если ссылки будут прямыми и на конце будут те форматы которые указаны выше. Форматы добавить можно свои, например .exe.

Ну вот и все.
Автор\Источник: http://get-element.3dn.ru/demo/demo127/index.html

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 1954 | Комментарии: 1 | Рейтинг: 3.3/7 | |Категория: Скрипты Разное | Добавил: Fallen™ | Дата: 20.02.2013 | Скачали: 0
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 1
+2   Спам
1 Fallen™   Дата: 21.02.2013  Время: 14:25   [№ 14503]
$FILE_DIRECT_URL$ - прямая ссылка на файл в каталоге файлов , вставьте это в ссылку для скачивания..


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Продажа рекламные мест ...

2

2 Файловик. Уникальные те...

0

3 Куплю сайты в индексе Я...

1

4 Куплю сайты с ТИЦ/PR (п...

9

5 Предлагаю услуги для ан...

0

6 Предлагаю услуги по про...

0

7 Комплексный прогон сайт...

51

8 Сайт онлайн фильмов на ...

1

9 Проблема с таблицей

9

10 Отредактировать фото

2


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru