Главная -> Уроки -> Иконизируем ссылки

Иконизируем ссылки

Линки есть на любых сайтах, но не всегда понятно, на что именно они ссылаются. Это может быть экселевский файл, ссылка на скайп, rss, pdf или еще что-то. Согласитесь, что было бы не плохо заранее знать, куда вы попадете или что скачаете (и чтобы при этом постоянно не смотреть в статусную строку, дабы распознать расширение, на которое оканчивается ссылка). Кстати, текстовая информация усваивается людьми только на 10%, в то время как графическая на 65%. Из чего следует, что графика распознается легче. Делаем выводы

Идея по сути проста: добавлять соответствующие иконки к каждой ссылке (ну или только к необходимым, это вам решать). НО! Добавлять не вручную каждый раз, а прописать в CSS, и пусть оно само работает.

Вот несколько примеров подобной “Иконизации”  (от англ. “iconize”; не очень красивое слово, но пока никакого другого аналога в голову не приходит)

Демо | Скачать

Нам потребуются:

  • набор иконок
  • и css-файл

Например, вы хотите, чтобы иконки отображались напротив аудио-файлов. Тогда в css-файле пишем следующий код:


a[href$='.mp3'], a[href$='.wav'], a[href$='.ogg'] {
padding: 5px 20px 5px 0;
background: transparent url(icons/icon_music.gif)
no-repeat center right;
}

А на странице указываем:


.mp3
.wav
.ogg

И получаем ссылки вида

.mp3 .wav .ogg

Допустим тематика вашего сайта стихотворения о любви, в этом случае иконки для файлов можно украшать, сердечками. Например, пусть для аудио файлов это будет сердце со скрипичным ключем, для ссылок на скачивание книг (doc, rtf, txt и аналогичные текстовые форматы) сердце с пером, ну и все в таком духе.

В связи с тем, что это CSS3, то данная техника работает в:

  • Firefox
  • Internet Explorer 7 (в 6 версии не работает)
  • Opera
  • Safari

Понравилась статья? Тогда подпишитесь на RSS, чтобы следить за обновлениями!

 

Продвижение сайтов в Республике Беларусь

Компания "Виста" предлагает продвижение сайтов в Республике Беларусь - первые 3 месяца бесплатно.