Недавно наткнулся на интересную JS библиотечку для оформления ссылок в тексте. Идея, возможно, не нова… но в целом такая схема мне кажется интересной и удобной для пользователя.
Суть в том, что к ссылке скриптом добавляется favicon сайта, на который она ведет. А также, различным цветом выделяются ссылки разного типа.
Если подробнее, то ссылки в тексте оформляются:
Скрипт
Пример
Для использования достаточно включить js-файл на странице:
И добавить нужный текст в блок с классом “dlink”:
Стили для ссылок разного типа:
В принципе, несложно написать что-нибудь подобное под себя или модифицировать этот скрипт, добавив картинки под разные типы ссылок на своем сайте. Например, ссылки на новости или на профиль пользователя.
Подумал, что вероятно проще сделать такую вещь на сервере, но есть проблема, что при проверке наличия favicon у внешнего ресурса, ответ может быть довольно долгим. В этом плане реализация на клиенте никаких проблем не доставляет.
Суть в том, что к ссылке скриптом добавляется favicon сайта, на который она ведет. А также, различным цветом выделяются ссылки разного типа.
Если подробнее, то ссылки в тексте оформляются:
- Разным цветом (стилем), в зависимости от того, куда ведет ссылка… внутренняя ссылка, ссылка на поддомен, внешняя, якорь или ссылка на адрес электронной почты. Пользователю сразу видно куда он переходит, без наведения на ссылку.
- Также в зависимости от типа перед ссылкой добавляется иконка:
— Для внутренней ссылки и поддоменов – установленная заранее картинка. Или иконка типа файла, если линк ведет на файл.
— Для внешних ссылок – иконка favicon сайта, куда идет ссылка. По хосту ссылки находится favicon, если его нет – картинка по дефолту. Если favicon узнаваем, то сразу понятен сайт назначения. Например,поиск в яндексе или в
гугле.
— Для ссылок на файл соответствующая иконка файла. Есть массив с набором расширений и соответствующих им иконок. Работает, конечно, только при прямой ссылке на файл.
— Для почтовой ссылки и якоря тоже свои иконки.
Скрипт
Пример
Для использования достаточно включить js-файл на странице:
- <script type="text/javascript" src="http://oopstudios.com/dlink/dlink.js"></script>
И добавить нужный текст в блок с классом “dlink”:
- <div class="dlink">
- ваш <a href="#">ссылка</a> текст...
- </div>
Стили для ссылок разного типа:
- a.internal {color: #D47700;}
- a.external {color: #0074D4;}
- a.subdomain {color: #D43500;}
- a.email {color: #00B235;}
В принципе, несложно написать что-нибудь подобное под себя или модифицировать этот скрипт, добавив картинки под разные типы ссылок на своем сайте. Например, ссылки на новости или на профиль пользователя.
Подумал, что вероятно проще сделать такую вещь на сервере, но есть проблема, что при проверке наличия favicon у внешнего ресурса, ответ может быть довольно долгим. В этом плане реализация на клиенте никаких проблем не доставляет.
