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


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

5757
8.6 из 10
Проголосовало: 9






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

Ну вот и все.
Автор публикации: Загрузка
Загрузка
FalleN, это его n материал
Источник: http://get-element.3dn.ru
  • Всего комментариев: 9

FalleN
0
FalleN написал: Написано 21 Февраля 2013 в 16:37
Комментарий №7
на одной решенной проблему появляется другая!! ну тада кому как!!

FalleN
0
FalleN написал: Написано 21 Февраля 2013 в 09:13
Комментарий №2
я вот щас думаю как там сделать!!!

PheonixICQ
0
PheonixICQ написал: Написано 21 Февраля 2013 в 11:01
Комментарий №3
По идее можно сделать с помощью фильтров

PheonixICQ
0
PheonixICQ написал: Написано 21 Февраля 2013 в 06:15
Комментарий №1
Да, скрипт хороший, но если использовать его в модуле каталог файлов там же используются не прямые ссылки.

BLAzER
0
BLAzER написал: Написано 21 Февраля 2013 в 13:30
Комментарий №4
$FILE_DIRECT_URL$ - прямая ссылка на сайт

FalleN
0
FalleN написал: Написано 21 Февраля 2013 в 13:47
Комментарий №5
ты гений!!!

PheonixICQ
0
PheonixICQ написал: Написано 21 Февраля 2013 в 16:02
Комментарий №6
А кто считать будет кол-во скачиваний? Сам что ли?

BLAzER
0
BLAzER написал: Написано 21 Февраля 2013 в 20:03
Комментарий №8
Ну ты сам подумай, я например знаю как сделать что бы количество скачиваний засчитывало.

PheonixICQ
0
PheonixICQ написал: Написано 24 Февраля 2013 в 00:15
Комментарий №9
Ну просвети тогда как ты собираешься считать кол-во скачиваний по прямым ссылкам? С помощью условных операторов? Если и делать самому прогу подсчитывающую клики то надо php знать

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 1
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: