Иконизировать ссылки по определенным параметрам и свойствам очень умный шаг в пользу юзабилити, пользователь должен знать куда приведет его ссылка.
При виде иконки возле ссылки пользователь легко поймет что его ожидает, ибо формат иконок понятен для каждого пользователя любой операционной системы.
Реализовать это очень просто — с помощью всемогущего css.
Ответ на опережение: да, способ не работает в IE6
Иконизируем по расширению файла
a[href $='.расширение_вашего_файла'] {
padding-right: 18px;
background: transparent url(имя_иконки.gif) no-repeat center right;
}
Пример в действии:
a[href$='.txt'] {
padding: 5px 20px 5px 0;
background: transparent url(icons/icon_txt.gif) no-repeat center right;
}
Иконизируем по действию
Сразу перейду к примеру, например отправка письма(mailto):
a[href ^="mailto:"] {
padding: 5px 20px 5px 0;
background: transparent url(icons/icon_mailto.gif) no-repeat center right;
}
Иконизируем по сайту
К примеру ссылка ведет на Википедию, так добавим ее иконку!
a[href *="ru.wikipedia.org"] {
padding: 5px 20px 5px 0;
background: transparent url(icons/wikipedia.gif) no-repeat center right;
}
Скачать пак с иконками »
