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

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

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>) не выделялись как внешние.

Поделиться

Комментарии

#1. 30 сентября 2007 года, 05:21. пишет:
д\з=)))
перед за кодом
$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);
вроде так.%).
#2. 30 сентября 2007 года, 05:22. пишет:
ппц. очапятался в одном месте.
#3. 30 сентября 2007 года, 11:06. пишет:
Это не совсем правильно.

Во-первых, вы просто подменили адрес ссылки. А если ссылка была с указанием домена, значит, это было для чего-то нужно.

Во-вторых, сайт может быть доступен по разным адресам, например, с www и без него. Соответственно, содержимое переменной $_SERVER['SERVER_NAME'] не будет одним и тем же для каждого запуска.
#4. 30 сентября 2007 года, 13:49. пишет:
проблема с ввв тоже решаеться подменой.
Во-первых, вы просто подменили адрес ссылки. А если ссылка была с указанием домена, значит, это было для чего-то нужно.
например?).
#5. 30 сентября 2007 года, 21:00. пишет:
Когда вы будете вырезать www, то там всё усложнится. А решение, на самом деле, состоит из одной строчки.
#6. 1 октября 2007 года, 02:16. пишет:
Ну чтож слушаем, хлопаем))).
---
з.ы. слух сделай куки на имя и мыло в каментах буду признателен).
#7. 1 октября 2007 года, 12:28. пишет:
Да, кстати. Домашнее задание было к пунктам 3-5, а вы что-то вставляете перед кодом из пункта 2.

Правильное решение (в духе всего метода):

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

Кукисы — легко. Я уже думал над этим. Просто тогда нужно будет еще один флажок делать (что-то типа «сохранить данные» или «чужой компьютер»). Мало кому понравится, если имя и e-mail будут сохраняться, например, на компьютерах в интернет-салонах.
#8. 1 октября 2007 года, 19:39. пишет:
о таком варианте кода я думал). но чет он мне не понравился.
(кукисы) ну так флаг и флаг).
ничего сложного не вижу).
#9. 2 октября 2007 года, 18:04. пишет:
Запрограммировать несложно. А вот интерфейс от этого усложнится. Нужно подумать, в общем.

Оставьте свой комментарий

Ваше имя:

Комментарий:

Для выделения используйте следующий код: [i]курсив[/i], [b]жирный[/b].
Цитату оформляйте так: [q = имя автора]цитата[/q] или [q]еще цитата[/q].
Ссылку начните с http://. Других команд или HTML-тегов здесь нет.

Сколько будет 79+5?