Сегодня речь пойдет о работе со ссылками на web странице, а если точнее – об их оформлении для просмотра и печати. У вас может возникнуть вполне закономерный вопрос: «О чем тут вообще речь? Ведь с помощью CSS можно оформить ссылки как угодно». В принципе, это действительно так, и большинство примеров в этой статье используют именно CSS, но если добавить немного JavaScript кода, то результат будет намного интереснее Начнем с постановки задачи. Нам нужно: 1) Выделить (визуально) все внешние ссылки на странице (внутренние должны остаться без изменений). 2) Сделать так, чтобы они открывались в новом окне браузера (опять же, внутренние ссылки должны работать как обычно). 3) При печати после текста внешней ссылки должен выводиться ее адрес. Тут существует несколько решений, но об этом чуть позже. Предполагается, что мы работаем с уже существующим сайтом, и править разметку страниц (искать внешние ссылки и изменять их атрибуты) никто не будет. Первый этап. Изменяем оформление внешних ссылок. Прежде всего, определимся, как именно нужно их оформить. Я решил использовать оформление в стиле википедии. Т. е. после ссылки размещаем маленькую иконку со стрелкой. Выглядеть это будет так: Таким образом, нам нужно: 1) Создать CSS стили. 2) После загрузки страницы найти все внешние ссылки. 3) Установить для них соответствующие стили. Стили разместим в файле styles. css.
Понравилась статья? Получай обновления и будь всегда в курсе событий!