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

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

jquery links decoration

Сегодня речь пойдет о работе со ссылками на 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. Блок со ссылками, естественно, создать не получится, страница будет просто распечатана как обычно.

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

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

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

    До встречи!

    • Оформление внешних ссылок для меня не новость ;), но вот пример оформления для печати показался интересен, только почему то в архиве примера происходит двойное дублирование. Конечно мало кто будет набирать ссылку с бумажного листа, но оптимальным мне кажется такой вариант — в тексте только анкоры ссылок с номером сноски над каждым анкором, а внизу уже список соответсвующих абсолютных url.

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

        почему то в архиве примера происходит двойное дублирование

        Так и знал, что о чем-то забыл 🙂
        В примере у меня остались оба варианта оформления для печати. Просто нужно выбрать один из них.

    • Оформление внешних ссылок для меня не новость ;), но вот пример оформления для печати показался интересен, только почему то в архиве примера происходит двойное дублирование. Конечно мало кто будет набирать ссылку с бумажного листа, но оптимальным мне кажется такой вариант — в тексте только анкоры ссылок с номером сноски над каждым анкором, а внизу уже список соответсвующих абсолютных url.

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

        почему то в архиве примера происходит двойное дублирование

        Так и знал, что о чем-то забыл 🙂
        В примере у меня остались оба варианта оформления для печати. Просто нужно выбрать один из них.

    • В данном примере иконка внешней ссылки будет неверно работать в ie в случае, когда ссылка становится 2-х и более строчной. Может быть кто-нибудь знает решение этой проблемы?

      • Как сделать с помощью CSS я не придумал, но на JS — нет проблем 🙂

        Просто добавляем катринку после ссылки (с помощью тега img)

        $('a[href^=http://]')
        .each(function() {$('<img src=»extlink14x14.gif» alt=»» />')
        .appendTo(this);});
        Понятно, этот метод не будет работать при отключенном JS. Но все-таки пользователей IE больше, чем тех кто работает без JS (к тому же часто вместе с JS отключают и загрузку картинок).

    • В данном примере иконка внешней ссылки будет неверно работать в ie в случае, когда ссылка становится 2-х и более строчной. Может быть кто-нибудь знает решение этой проблемы?

      • Как сделать с помощью CSS я не придумал, но на JS — нет проблем 🙂

        Просто добавляем катринку после ссылки (с помощью тега img)

        $('a[href^=http://]')
        .each(function() {$('<img src=»extlink14x14.gif» alt=»» />')
        .appendTo(this);});
        Понятно, этот метод не будет работать при отключенном JS. Но все-таки пользователей IE больше, чем тех кто работает без JS (к тому же часто вместе с JS отключают и загрузку картинок).

    • Супер, спасибо за статью! Сейчас поэкспериментирую)

    • Супер, спасибо за статью! Сейчас поэкспериментирую)

    • в описании класса .ext свойства background лучше писать в короткой форме. padding: 0 0 0 0; выглядит воообще нелепо.

      • Согласен. Но, честно говоря, этот класс вообще не нужен 🙂 Я его добавил чтобы отменить отступ в 20px справа, и забыл, что стили для media=»screen» не применяются для media=»print».

    • в описании класса .ext свойства background лучше писать в короткой форме. padding: 0 0 0 0; выглядит воообще нелепо.

      • Согласен. Но, честно говоря, этот класс вообще не нужен 🙂 Я его добавил чтобы отменить отступ в 20px справа, и забыл, что стили для media=»screen» не применяются для media=»print».