Сайт Романа ПарпалакаЗаметкиТехнологииВеб-разработкаВнешние ссылки

Внешние ссылки

12 июля 2006 года

Бывает полезно выделить ссылки, ведущие с вашего сайта на другие. Например, на этом сайте внешние ссылки выделены при помощи маленькой картинки.

Какими способами можно добиться такого эффекта?

1. Метод для чайников. Рядом с каждой внешней ссылкой вставляется тег <img ...>. В силу очевидных недостатков сразу переходим ко второму методу.

2. Использование PHP. Внешняя ссылка имеет вид

<a href="http://www.some_site.ru">Другой сайт</a>

и ее можно найти в тексте страницы средствами PHP и на лету заменить. Простейший вариант состоит в том, чтобы в самый главный скрипт (если вдруг у вас такого нет, срочно читайте статью о шаблонизаторе) поместить вызов следующей функции:

$out = str_replace('<a href="http://',
   '<img src="ext_link.gif" alt="" /><a href="http://',
   $out);

Регулярные выражения здесь отдыхают из-за медленной работы в случае больших страниц. Недостатки описанного подхода заключаются в загрязнении HTML-кода, отдаваемого клиенту, а также в том, что картинка располагается перед ссылкой. Заставить ее быть после ссылки затруднительно.

3. И тут приходит CSS. Вместо предыдущего оператора можно написать этот:

$out = str_replace('<a href="http://',
   '<a class="ext" href="http://',
   $out);

Теперь надо задать стиль ext для внешних ссылок. Поскольку нас интересует картинка, то попытаемся указать ее в качестве фоновой:

a.ext {
   background-image: url(ext_link.gif);
   background-position: right;
   background-repeat: no-repeat;
   padding-right: 15px;
}

Все бы хорошо, но такое решение сносно смотрится только в Firefox. IE и даже Opera иногда неправильно располагают фон. Ведь тег <a ...> — строчный, а согласно стандартам фон у строчных элементов задать нельзя. Приходится искать другое решение.

4. Псевдо-классы :before и :after. С их помощью можно добавить до или после тега, к которому они применяются, какой-нибудь текст или даже картинку. Как раз то, что нам надо! Пишем новый стиль:

a.ext:after {
   content: url(ext_link.gif);
}

Если необходимо вставить текст, стиль будет такой:

a.ext:after {
   content: " (это была внешняя ссылка)";
}

Мы добились того, что хотели. Почти добились. Дело в том, что IE совсем не понимает то, что мы написали.

5. Решение для IE. Взято отсюда. В нашем случае нужно написать

a.ext {
   behavior: expression(
      !this.after ? this.after = this.innerHTML = this.innerHTML +
      '<img src="ext_link.gif" border="0" alt="" />' : '' );
}

a.ext:after {
   content: url(ext_link.gif);
}

Это наилучший вариант, который я смог найти. Он работает одинаково хорошо во всех современных браузерах.

В качестве домашнего задания добавьте еще одну деталь, чтобы ссылки на внутренние страницы, записанные с указанием домена (такие, как <a href="http://example.com/"></a>) не выделялись как внешние.

Поделиться