Внешние ссылки
Бывает полезно выделить ссылки, ведущие с вашего сайта на другие. Например, на этом сайте внешние ссылки выделены при помощи маленькой картинки.
Какими способами можно добиться такого эффекта?
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);
Регулярные выражения здесь отдыхают
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.
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>) не выделялись как внешние.