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

Линки есть на любых сайтах, но не всегда понятно, на что именно они ссылаются. Это может быть экселевский файл, ссылка на скайп, 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;
}


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


<a href="#noname.mp3">.mp3</a>
<a href="#noname.wav">.wav</a>
<a href="#noname.ogg">.ogg</a>


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

.mp3 - .wav - .ogg

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

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

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

Спасибо за добавление статьи в: