Иконизируем ссылки
Линки есть на любых сайтах, но не всегда понятно, на что именно они ссылаются. Это может быть экселевский файл, ссылка на скайп, 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>
И получаем ссылки вида
Допустим тематика вашего сайта стихотворения о любви, в этом случае иконки для файлов можно украшать, сердечками. Например, пусть для аудио файлов это будет сердце со скрипичным ключем, для ссылок на скачивание книг (doc, rtf, txt и аналогичные текстовые форматы) - сердце с пером, ну и все в таком духе.
В связи с тем, что это CSS3, то данная техника работает в:
- Firefox
- Internet Explorer 7 (в 6 версии не работает)
- Opera
- Safari
Привет, пока нет комментариев, будь первым!