Внешние ссылки
Бывает полезно выделить ссылки, ведущие с вашего сайта на другие. Например, на этом сайте внешние ссылки выделены при помощи маленькой картинки.
Какими способами можно добиться такого эффекта?
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://www.your_site.ru/"></a>) не выделялись как внешние.
Комментарии:
перед за кодом
$out = str_replace('<a href="http://',поставить
'<img src="ext_link.gif" alt="" /><a href="http://',
$out);
$out = str_replace('<a href="http://'.$_SERVER['SERVER_NAME'],'<a href="/',$out);
вроде так.%).
Во-первых, вы просто подменили адрес ссылки. А если ссылка была с указанием домена, значит, это было для чего-то нужно.
Во-вторых, сайт может быть доступен по разным адресам, например, с www и без него. Соответственно, содержимое переменной $_SERVER['SERVER_NAME'] не будет одним и тем же для каждого запуска.
Во-первых, вы просто подменили адрес ссылки. А если ссылка была с указанием домена, значит, это было для чего-то нужно.например?).
---
з.ы. слух сделай куки на имя и мыло в каментах буду признателен).
Правильное решение (в духе всего метода):
$out = str_replace('<a class="ext" href="http://written.ru', '<a href="http://written.ru', $out);
Кукисы — легко. Я уже думал над этим. Просто тогда нужно будет еще один флажок делать (что-то типа «сохранить данные» или «чужой компьютер»). Мало кому понравится, если имя и e-mail будут сохраняться, например, на компьютерах в интернет-салонах.
(кукисы) ну так флаг и флаг).
ничего сложного не вижу).