Ссылка в новом окне

Атрибуты ссылок

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега . Синтаксис следующий.

В качестве значения используется имя окна или фрейма, заданное атрибутом name . Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен применяются следующие.

• _blank — загружает страницу в новое окно браузера.
• _self — загружает страницу в текущее окно (это значение задается по умолчанию).
• _parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self .
• _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self .

В примере 8.4 показано, как сделать, чтобы ссылка открывалась в новом окне.

Пример 8.4. Открытие ссылки в новом окне

      
Открыть в новом окне
  

Атрибут target корректно использовать только при переходном , при строгом будет сообщение об ошибке, поскольку в этой версии HTML target уже не поддерживается.

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

title

Добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши задерживается на ссылке, после чего подсказка через некоторое время пропадает. Синтаксис следующий.

В качестве значения указывается любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки. В примере 8.5 показано, как использовать атрибут title для ссылок.

Пример 8.5. Создание всплывающей подсказки

      
Рисунки
  

Результат данного примера показан на рис. 8.8.

Рис. 8.8. Вид всплывающей подсказки в браузере

Цвета и оформления всплывающей подсказки зависят от настроек операционной системы и браузера, и меняться разработчиком не могут.

Источник

Создание простых всплывающих подсказок на HTML5, CSS и jQuery

Гуру верстки вряд ли найдут в этом посте что-то новое для себя. Этот пост скорее для начинающих верстальщиков у которых, как и у меня, были проблемы с созданием и стилизацией универсальных всплывающих подсказок.

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

Решение

Способ, который я вам предложу, достаточно прост и эффективен. Работает во всех браузерах, даже в ІЕ 6 (Многократно тестировано мной). Легко изменим и удобен. Не загромождает код и делает его наглядным. Его можно легко изменить по свои нужды. Например, сделать задержку вывода подсказки через setTimeout или другое.

HTML

Предположим у нас есть HTML-страница со ссылкой, при наведении на которую нам нужно вывести подсказку:

         Ссылка   

Как вы уже могли заметить из листинга, я использую css-препроцессор LESS.
Мы подключили в отдельные файлы CSS-стили и скрипты. Еще у нас есть одна ссылка и блок div, который и будет контейнером для подсказки.
Спецификация HTML5 разрешает использовать пользовательские атрибуты типа data-atribute, в которых можно сохранять некую информацию об элементе или блоке. Именно в data-атрибутах мы будем сохранять текст всплывающих подсказок.

Для хранения я использую атрибут data-tooltip.
C HTML закончили — можно перейти к стилям.

CSS

Я использую библиотеку LESS Elements и всем советую, поэтому некоторые свойства я напишу с использованием данного фреймворка.

@import "css/elements.less"; #tooltip

С листинга понятно, что в первой строчке мы подключаем LE, задаем блоку div#tooltip абсолютное позиционирование и скрываем его. Дальше мы задаем блоку фоновый цвет и цвет текста, делаем скругление уголки (5px) и устанавливаем значение прозрачности на 50%.

jQuery

$.jQuery(document).ready(function() < $("[data-tooltip]").mousemove(function (eventObject) < $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip").text($data_tooltip) .css(< "top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 >) .show(); >).mouseout(function () < $("#tooltip").hide() .text("") .css(< "top" : 0, "left" : 0 >); >); >);// Ready end. 

Теперь мы добавляем в выборку все элементы с атрибутом data-tooltip и при наведении на нужный элемент мышью получаем значение подсказки и сохраняем его в переменной. Дальше добавляем текст подсказки в блок #tooltip, задаем ему координаты курсора от края станицы + 5 px и наконец выводим блок с подсказкой в нужном месте. После ухода мыши с элемента мы прячем блок #tooltip, чистим его содержимое и возвращаем в 0;0;.

Вот и все!
В итоге мы получим что-то такое: Демо

Благодаря такому простому скрипту все элементы на странице, у которых будет атрибут data-tooltip, получат подсказку.

Источник

Создание подсказок в ссылках

Подсказки ( tooltips, screentips ), отображаемые браузером при наведении на объект или ссылку – отличный способ сообщить что-либо посетителю сайта.

Сама идея подсказок была популяризована приложениями вроде Microsoft Word , которые имели множество командных кнопок с пиктограммами. Подсказки объясняли действие команды пользователю, когда тот задерживал указатель мыши над кнопкой.

Есть несколько способов создания подсказок, отображаемых браузером над ссылками. Из этой статьи вы узнаете, как преобразить эти подсказки, используя только HTML и CSS .

Исходные коды, использованные в этой статье, можно загрузить отсюда .

Позиционирование подсказок сверху, снизу, справа или слева от ссылки

Начнём с создания разметки. Текст подсказки будет находиться в элементе span . Присвоим класс каждой ссылке, чтобы затем стилизовать их:

TOP POSITIONThis is a top position tooltip! LEFT POSITIONThis is a left position tooltip! RIGHT POSITIONThis is a right position tooltip! BOTTOM POSITIONThis is a bottom position tooltip!

Стили

Теперь, когда разметка готова, зададим оформление ссылок:

a.top_tooltip,a.left_tooltip,a.right_tooltip,a.bottom_tooltip

Как видите, наши подсказки являются строчными ( inline ) элементами с относительным позиционированием. Добавим подсказкам визуальной привлекательности, поместив их в прямоугольник со скруглёнными краями. Позиционированием подсказок мы будем управлять с помощью полей ( margin ) и свойства position:

/* TOP TOOLTIP ————————————————-*/ a.top_tooltip span < width: 140px; height: auto; color: #fff; background: #2b2b2b; position: absolute; font-size: 13px; text-align: center; padding: 10px; line-height: 20px; visibility: hidden; border-radius: 10px; >a.top_tooltip span:after < content: ''; position: absolute; top: 100%; left: 50%; margin-left: -8px; width: 0; height: 0; border-top: 8px solid #2b2b2b; border-right: 8px solid transparent; border-left: 8px solid transparent; >a:hover.top_tooltip span < visibility: visible; opacity: 0.8; bottom: 30px; left: 50%; margin-left: -76px; z-index: 999; >/* LEFT TOOLTIP ————————————————-*/ a.left_tooltip span < width: 140px; height: auto; color: #fff; background: #2b2b2b; position: absolute; font-size: 13px; text-align: center; padding: 10px; line-height: 20px; visibility: hidden; border-radius: 10px; >a.left_tooltip span:after < content: ''; position: absolute; top: 50%; left: 100%; margin-top: -8px; width: 0; height: 0; border-left: 8px solid #2b2b2b; border-top: 8px solid transparent; border-bottom: 8px solid transparent; >/* RIGHT TOOLTIP ————————————————-*/ a.right_tooltip span < width: 140px; height: auto; color: #fff; background: #2b2b2b; position: absolute; font-size: 13px; text-align: center; padding: 10px; line-height: 20px; visibility: hidden; border-radius: 10px; >a.right_tooltip span:after < content: ''; position: absolute; top: 50%; right: 100%; margin-top: -8px; width: 0; height: 0; border-right: 8px solid #2b2b2b; border-top: 8px solid transparent; border-bottom: 8px solid transparent; >a:hover.right_tooltip span < visibility: visible; opacity: 0.8; left: 100%; top: 50%; margin-top: -30px; margin-left: 10px; z-index: 999; >/* BOTTOM TOOLTIP ————————————————-*/ a.bottom_tooltip span < width: 140px; height: auto; color: #fff; background: #2b2b2b; position: absolute; font-size: 13px; text-align: center; padding: 10px; line-height: 20px; visibility: hidden; border-radius: 10px; >a.bottom_tooltip span:after < content: ''; position: absolute; bottom: 100%; left: 50%; margin-left: -8px; width: 0; height: 0; border-bottom: 8px solid #2b2b2b; border-right: 8px solid transparent; border-left: 8px solid transparent; >a:hover.bottom_tooltip span

Селектор :hover поможет нам сделать подсказки видимыми, когда это нужно. А :after определит окончательное местоположение подсказки.

Изменение цвета подсказки

Теперь, когда мы задали основу подсказки, изменить её отдельные параметры вроде цвета не составит труда. Во-первых, нужно задать цвет фона (атрибут background ) элемента span :

Во-вторых, цвет рамки должен соответствовать цвету фона. Мы внесём соответствующую правку в селектор :after .

В нижеприведённом примере мы изменим цвет подсказки, располагающейся снизу ссылки. Поэтому манипуляции нужно проводить со свойством border-bottom :

a.bottom_tooltip_red span:after

Добавление анимации к подсказке

Возможности CSS3 позволяют нам добавить современно выглядящие эффекты к нашим подсказкам. Давайте научимся пользоваться эффектами угасания ( fading ) и скольжения ( sliding ).

Чтобы создать эффект угасания, необходимо манипулировать прозрачностью элемента span в обычном состоянии и с наведённым на него указателем мыши с использованием свойства transition . Всё это реализует следующий код:

a.left_tooltip_fading span < transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; opacity: 0; >a:hover.left_tooltip_fading span

Заметьте, что функция перехода ease-in-out обеспечивает наиболее плавное возникновение и угасание подсказки.

Также можно ещё создать эффект прыгающего мяча при помощи свойства translate3d селектора :hover . Для этого добавьте в селектор следующий код:

a:hover.bottom_tooltip_sliding span

Отображение картинки в подсказке

Следующая задача – самая простая в нашем сегодняшнем уроке. Просто поместите картинку в span и задайте ссылке соответствующий класс. Если вы хотите добавить также и текст, отрегулируйте соответствующим образом размер изображения. Вот пример разметки:

Заключение

Готово! Теперь вы научились делать замечательные, красочные подсказки, используя HTML и CSS3 . Хотя сделать несколько подсказок вручную не составляет труда, в больших проектах имеет смысл применить такие средства, как CSS -библиотека Hint.css или jQuery -библиотека tooltipster.js .

Надеюсь, вам понравилось то, что вы узнали сегодня. До встречи!

Источник