Оформление внешних ссылок

Владимир | | CSS, HTML, JavaScript, Web дизайн, Web разработка.

Сегодня речь пойдет о работе со ссылками на web странице, а если точнее – об их оформлении для просмотра и печати. У вас может возникнуть вполне закономерный вопрос: «О чем тут вообще речь? Ведь с помощью CSS можно оформить ссылки как угодно». В принципе, это действительно так, и большинство примеров в этой статье используют именно CSS, но если добавить немного JavaScript кода, то результат будет намного интереснее 😉

Начнем с постановки задачи.

Нам нужно:

1) Выделить (визуально) все внешние ссылки на странице (внутренние должны остаться без изменений).

2) Сделать так, чтобы они открывались в новом окне браузера (опять же, внутренние ссылки должны работать как обычно).

3) При печати после текста внешней ссылки должен выводиться ее адрес. Тут существует несколько решений, но об этом чуть позже.

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

Первый этап. Изменяем оформление внешних ссылок.

Прежде всего, определимся, как именно нужно их оформить. Я решил использовать оформление в стиле википедии. Т.е. после ссылки размещаем маленькую иконку со стрелкой. Выглядеть это будет так:

ext link

Таким образом, нам нужно:

1) Создать CSS стили.

2) После загрузки страницы найти все внешние ссылки.

3) Установить для них соответствующие стили.

Стили разместим в файле styles.css.

.ext {
	background-image: url('extlink14x14.gif');
	background-position: right;
	background-repeat: no-repeat;
	padding: 0 20px 0 0;
}

Как видите, мы установили стили для класса ext. С их помощью мы создали отступ справа от ссылки (20 px) и добавили файл с картинкой.

Теперь ищем все внешние ссылки и устанавливаем для них наш новый класс. Сразу же добавляем атрибут target='_blank' (ссылки будут открываться в новом окне).

$(function() {
	$('a[href^=http://]').addClass('ext').attr('target', '_blank');
});

В принципе, эта операция довольно сложная, но с помощью jQuery её можно записать всего одной строкой.

Примечание. Мы считаем, что все внешние ссылки начинаются с http://.

Оформление ссылок для печати.

Тут все немного сложнее. Главная проблема в том, что, распечатав страницу, посетитель теряет часть информации, а именно – адреса ссылок.

Я нашел два варианта решения этой проблемы.

Первый – использовать специальные CSS стили для «печатной» версии страницы. Подробно этот метод описан в статье «15 минут на подготовку к печати».

Для его реализации нужно создать еще один файл со стилями (printstyles.css):

.ext {
	background-image: none;
	padding: 0 0 0 0;
}

a[href^="http"]:after {
    content:" (" attr(href) ") "; font-size: 90%;
}

И указать браузеру, использовать их при печати страницы (с помощью атрибута media):

<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="printstyles.css" type="text/css" media="print" />

Теперь при печати страницы у нас вместо картинки после ссылки будет показан её адрес.

Все отлично, но есть два недостатка: ссылки мешают читать текст, и в IE этот метод не работает.

Второй вариант решения – поместить все ссылки с адресами в конце страницы. Этот метод подробно описан в статье «Improving Link Display for Print» (кстати, есть перевод на русский).

Подробно пересказывать эту статью я не буду, остановлюсь только на основных моментах, которые касаются нашего примера.

Алгоритм будет таким:

1) найти все внешние ссылки;

2) создать блок в конце страницы (в нем будет размещен список со ссылками);

3) скопировать найденные ссылки в этот блок, при этом после каждой ссылки в скобках добавить её адрес;

4) сделать так, чтобы блок со списком ссылок отображался только при печати страницы.

Первые три операции мы выполняем с помощью JavaScript функции:

function createReferences() {
	$('
    ').appendTo('body');
	$('a[href^=http://]').clone()
		.each(function() {
				$(' (' + this.href + ')').appendTo(this);
			})
		.appendTo('#references')
		.wrap('
  1. ');
}

    Функция appendTo добавляет новый блок на страницу (в данном случае это нумерованный список). С помощью clone() мы копируем ссылки. После каждой ссылки вставляем новый тег span, в котором размещаем адрес ссылки.

    Добавляем ссылки в список (строка 7) и при этом не забываем заключить её в теги li (с помощью функции wrap, строка 8).

    В результате мы получим упорядоченный список со всеми внешними ссылками.

    Остается только сделать его невидимым для «экранной» версии страницы. Эта задача легко решается с помощью CSS стилей.

    В файл styles.css добавляем:

    #references {
	display: none;
}

    Этот стиль будет применен, если страница отображается на экране. При печати браузер его проигнорирует.

    Как видите, ничего сверхсложного. Кстати, обратите внимание, страница будет нормально отображаться, даже если у посетителя отключен JavaScript. Блок со ссылками, естественно, создать не получится, страница будет просто распечатана как обычно.

    Скачать пример

    Если хотите поэкспериментировать качайте архив с примером.

    Я буду рад выслушать любые ваши пожелания, замечания и советы 🙂

    До встречи!