Сделать всплывающую подсказку при наведении на картинку, оформление подсказки должно управляться через стили.
РешениеВсплывающая подсказка, добавляемая к изображениям через атрибут title
тега
, является системным элементом, поэтому вид подсказки зависит от используемого браузера, операционной системы и её настроек. Хотя напрямую изменить оформление подсказки нельзя, допустимо пойти обходным путем и имитировать всплывающую подсказку с помощью JavaScript.
Для начала создадим пустой элемент с идентификатором floatTip и определим его стиль. Обязательными должны быть три стилевых свойства - position со значением absolute , оно задаёт абсолютное позиционирование элемента, display со значением none скрывает элемент и width задаёт ширину подсказки. Остальные свойства выступают по желанию разработчика и предназначены для изменения оформления слоя (пример 1).
Пример 1. Стиль для всплывающей подсказки
#floatTip { position: absolute; /* Абсолютное позиционирование */ width: 250px; /* Ширина блока */ display: none; /* Прячем от показа */ border: 1px solid #000; /* Параметры рамки */ padding: 4px; /* Поля вокруг текста */ font-family: sans-serif; /* Рубленый шрифт */ font-size: 9pt; /* Размер шрифта */ color: #333; /* Цвет текста */ background: #ffe5ff; /* Цвет фона */ }
Сам скрипт состоит из двух функций - moveTip отслеживает движение мыши и в соответствии с координатами курсора меняет положение элемента, и toolTip управляет видимостью элемента и выводит в нём желаемый текст (пример 2).
Пример 2. Скрипт для вывода слоя
Document.onmousemove = moveTip; function moveTip(e) { floatTipStyle = document.getElementById("floatTip").style; w = 250; // Ширина подсказки // Для браузера IE6-8 if (document.all) { x = event.clientX + document.body.scrollLeft; y = event.clientY + document.body.scrollTop; // Для остальных браузеров } else { x = e.pageX; // Координата X курсора y = e.pageY; // Координата Y курсора } // Показывать слой справа от курсора if ((x + w + 10) < document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; // Показываем подсказку floatTipStyle.display = "block"; } else { // Прячем подсказку floatTipStyle.display = "none"; } }
Для удобства и универсальности скрипт следует вынести в отдельный файл и подключать его через атрибут src тега . Окончательный код показан в примере 3.
Пример 3. Создание всплывающей подсказки
HTML5 CSS 2.1 IE Cr Op Sa Fx
Всплывающая подсказка #floatTip { position: absolute; width: 250px; display: none; border: 1px solid #000; padding: 4px; font-family: sans-serif; font-size: 9pt; color: #333; background: #ffe5ff; }
Объектив: Canon EF 24-105 f/4L IS USM
Вспышка: Canon Speedlite 580 EX
Выдержка: 1/125
Диафрагма: 5.6")"
onMouseOut="toolTip()">
Результат данного примера показан на рис. 1.
Рис. 1. Всплывающая подсказка, выводимая с помощью JavaScript
Доброго времени суток, любознательные подписчики и гости блога. Сегодня мы разберем с вами полезный раздел в прототипно-ориентированном сценарном языке, а именно событие при наведении мыши JavaScript.
Я хочу, чтобы вы хорошенько разобрались в таких событиях, как click, mouseup, mousedown, mouseover и других, поняли разницу между ними и научились их использовать для решения поставленных задач. Конечно же после каждого ключевого теоретического материала вы сможете найти программную реализацию примеров. Ну что ж, приступим!
Все сведенья о событиях мышкиДля мыши существует несколько событий, которые полностью охватывают всевозможные действия курсора на странице . Среди них есть те, которые срабатывают при нажатии на объект, наведении на него или движении указателя по открытому окну. Их все можно поделить на две группы: простые и комплексные (составные) события.
Начнем с простогоДля начала познакомимся с простыми событиями. Их всего пять. Для удобства я поместил описание каждого инструмента в таблицу, прикрепленную ниже.
| Наименование | Описание |
| mousedown | Названный event вызывается, когда одна из кнопок мышки нажата, но пока еще не отпущена. |
| mouseup | А этот срабатывает уже при отпускании зажатой ранее кнопочки. |
| mouseover | Вызывается при наведении курсора на обрабатываемый объект. |
| mouseout | Обрабатывает действие выхода курсора из области элемента. |
| mousemove | Любое движение указателя над определенной областью вызывает текущее событие. |
Ну а теперь для закрепления материала разберем пример. Я создал небольшую программку, в которой изменяются эмоции смайла при наведении и отведении курсора.
Наведите на изображение курсор мыши и оно изменится.
А теперь отведите его в сторону и понаблюдайте за изменениями
function ChangeOver(x) {
x.src= "http://storage2.vsemayki.ru/images/0/0/514/514012/previews/sign_front_white_500.jpg";
};
function ChangeOut(x) {
x.src= "http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg";
}
Теперь давайте перейдем к комплексным видам. Каждый из таких событий включает в себя несколько простых. При этом все составные части комплексного события не срабатывают одновременно, а выстраиваются в очередь. Поэтому вы иногда могли наблюдать такую ситуацию, что при быстром кликанье по, к примеру, пунктам меню веб-сайта нажатия иногда не срабатывают.
Почему же так? Ответ достаточно прост.
Обработка событий происходит с какой-то максимально допустимой скоростью. И при этом не стоит забывать, что события обрабатываются по очереди. А значит при слишком быстром нажатии на разные элементы цепочка обработки может не выполниться полностью.
Итак, ниже перечислены составные события.Как вы уже поняли, комплексные события несколько упрощают жизнь разработчиков, включая в себя сразу набор необходимых простых event-ов. Вследствие этого на сегодняшний день никто не может представить обычной обработки кнопок или других элементов без того же click .
Для практического ознакомления с функционированием выше перечисленных событий я модифицировал предыдущее приложение. Проанализируйте результат моей работы.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
Пример наведения указателя на элемент страницы
|
Пример наведения указателя на элемент страницы
Нажмите на меня один раз и смайл улыбнется!
А теперь нажмите на меня двойным кликом и смайл начнет двигаться!
Если хочешь вернуться к начальному состоянию, то нажми на меня правой кнопкой!
function Smile() {
document.getElementById("pic").src= "http://storage2.vsemayki.ru/images/0/0/514/514012/previews/sign_front_white_500.jpg";
};
function Cry() {
document.getElementById("pic").src= "http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg";
};
function Move() {
document.getElementById("pic").src= "https://otvet.imgsmail.ru/download/197747824_e708b2123d2b2d745d271f15cb144dcc_800.gif";
};
Как видите, все очень просто. Данные элементы легко вызывать в коде и привязывать их к определенным действиям.
Всплывающая подсказка представляет собой короткое текстовое сообщение с пояснением, возникающие в результате наведения курсора мышки на элемент страницы. Далее рассмотрим как сделать всплывающую подсказку в html.
Стандартный способЗа показ подсказки отвечает {title}. Этот атрибут можно использовать для показа подсказки к разным объектам, но чаще всего его используют в качестве поясняющего текста к изображениям.
Для показа всплывающей подсказки нужно только лишь добавить это атрибут и написать в нем необходимый поясняющий текст.
В качестве подсказки может использоваться как одно слово или словосочетание, так и сразу несколько предложений. Обычно всплывающая html подсказка выглядит следующим образом:
Поясняющий текст появляется не сразу после наведения мышки на изображение, а через пару секунд. Такая особенность всплывающих подсказок заложена по умолчанию.
Стандартная всплывающая html подсказка при наведении на текст имеет один существенный недостаток – отсутствие инструментов для стилизации. Чтобы решить эту проблему необходимо использовать другие способы создания всплывающей подсказки.
Способ на чистом cssДля красивого вывода подсказки обычно используется именно этот способ. Он предусматривает заключение картинки в контейнер с идентификатором. Благодаря этому, обеспечивается возможность обращения к данному контейнеру в стилях:
В вышеуказанном примере единственным непонятным моментом может быть. Этот атрибут не выполняет никакой функции. Однако его значение используется в js и css. Таким образом, и этот атрибут может быть полезен. Но сначала необходимо описать стили блок-контейнера.
Относительное позиционирование используется по причине того, что контейнер со всплывающей подсказкой будет позиционироваться абсолютно. Поэтому необходимо сделать так, чтобы текст позиционировался только относительно родительского блока, а не всей страницы.
#pdskzk{ position: relative; display: inline-block; }
Блочно-строчное отображение не помешает родительскому блоку (в том числе и контейнеру с со всплывающей подсказкой) растянуться на всю ширину окна. Теперь осталось создать поясняющий текст.
Всплывающие подсказки в css проще всего делать посредством псевдоэлементов:
#pdskzk:hover:after { content: attr(data-name); position: absolute; left: 0; bottom: 0; background: rgba(5,13,156,.55); color: #fff; text-align: center; font-family: cursive; font-size: 14px; padding: 3px 0; width: 100%; }
Несмотря на обилие кода, он очень прост для понимания. Селектор #pdskzk:hover:after необходим для создания псевдоэлемента after в тот момент, когда пользователь ставит курсор на контейнер с изображением. Свойство content: attr(data-name) предназначено для указания текстового значения. Оно соответствует свойству, которое записано в атрибуте data-name у контейнера-обертки изображения.
После этого остается позиционировать объект абсолютно и задать ему необходимые параметры:
- Цвет;
- Шрифт и т.д.
Таким образом, получается такая всплывающая подсказка css при наведении на картинку:
По сравнению со стандартной подсказкой, этот вариант поясняющего текста при наведении на изображение выглядит более интересно и привлекательно. К тому же подсказка возникает сразу при наведении курсора на элемент. При этом плавное появление всплывающей подсказки невозможно из-за то, что псевдоэлементы не поддерживают такой функционал.
Плавное появлениеТем не менее, возможности css позволяют использовать плавное появление подсказки. В этом случае не используются псевдоэлементы. Это обусловлено тем, что именно они не позволяют применить опцию плавного появления. Пример реализации плавного появления всплывающей подсказки на css представлен ниже:
Текст подсказки
Стоит заметить, что css-код практически не изменился:
#pdskzk2{ position: relative; display: inline-block; } #pdskzk2 .text { transition: all 0.6s; opacity: 0; position: absolute; left: 0; bottom: 0; background: rgba(5,13,156,.55); color: #fff; text-align: center; font-family: cursive; font-size: 14px; padding: 3px 0; width: 100%; transform: scale(0); } #pdskzk2:hover .text{ opacity: 1; }
Ключевое изменение касается свойства content, которое не используется в этом примере. Оно потеряло актуальность ввиду того, что поддерживается только псевдоэлементами. Еще одно изменение – появление свойства transition. Именно это свойство отвечает за создание плавных переходов. Внимательный читатель наверняка обратил внимание на значение opacity: 0. Оно делает контейнер с подсказкой прозрачным.
Теперь при наведении на родительский блок достаточно вернуть стандартную прозрачность контейнеру с подсказкой. После этого можно проверить работу кода и убедиться в том, что поясняющий текст возникает на экране плавно.
CSS3 позволяет скрыть элемент и другими способами. Например, может использоваться трансформация. Этот метод предусматривает замену полной прозрачности на свойство transform: scale(0). Также необходимо уменьшить размер контейнера до 0. Таким образом, его не будет видно на странице. При наведении на контейнер с изображением нужно указать свойство transform: scale(1). Этот способ позволяет сделать появление всплывающего текстового сообщения не только плавным, но и эффектным.
Другие способыВсплывающие текстовые сообщения можно создавать и посредством jQuery. Эта библиотека может использоваться как для написания своего кода, так и для создания плагина для всплывающих подсказок на jQuery, который реализует необходимый эффект.
Speech Bubbles Tooltip позволяет добавлять всплывающие подсказки, текст которых содержится либо в атрибуте title ссылки, либо представлен в виде HTML текста в отдельном файле, который подгружается с помощью AJAX. Стиль вывода подсказок не использует никаких изображений, только приемы CSS.
Speech Bubbles Tooltip использует скругленные углы и тени CSS3. подсказки отлично выглядят в FF3+, Opera 9+, и Google Chrome/ Safari 4+. В IE7 и IE8 подсказки сохраняют свою функциональность без эффектов CSS3.
Использование. Шаг 1.Добавляем следующий код в секцию head страницы, на которой нужно организовать подсказки:
jQuery(function($){ //По наступлению события document.ready //Применяем подсказки для ссылок с классом "addspeech", а текст для подсказок будем искать в файле "speechdata.txt" $("a.addspeech").speechbubble({url:"speechdata.txt"}))
В данном коде используются три файла, которые можно найти в архиве со скриптом (speechbubbles.css , speechbubbles.js и speechdata.txt ). По умолчанию, они размещаются в том же каталоге, что и веб страница.
Шаг 2.В HTML коде установить для ссылок с подсказками класс addspeech и значение атрибута rel, которое соответствует тексту нужной подсказки в файле speechdata.txt
Например, "Создание пользовательской панели опций в Wordpress".
По умолчанию скрипт устанавливает всплывающие подсказки для всех ссылок с классом addspeech . При инициализации скрипта устанавливается файл, из которого будут загружаться подсказки (смотри шаг 1).
Стиль вывода подсказок устанавливается с помощью CSS кода файла speechbubles.css .
Два способа задания текста подсказокСуществует два способа задания текста для подсказок:
Способ 1.Текст подсказки устанавливается в качестве значения атрибута title ссылки с классом addspeech :
Текст ссылки
Скрипт автоматически будет использовать значение атрибута title для подсказки.
Способ 2.Разметка подсказок подготавливается в другом файле (в примере это файл speechdata.txt ). Данный метод позволяет организовать централизованное хранение подсказок, что будет очень удобно при разработке растущего проекта.
Формат разметки подсказок следующий:
Пример подсказки №1. Пример подсказки №2. Выделяем часть текста. Пример подсказки №3. Пример подсказки №4.
Пример использования ссылки
В данном примере для подсказки будет использоваться текст элемента с id speechbubble1 из файла speechdata.txt .
Tooltip (тултип) - всплывающая подсказка на html + javascript\jQueryСтатья из раздела "зачем плагины, библиотеки - сделай сам". В этот раз рассмотрим реализацию очень интересного инструмента, который очень полезен в каких-либо интерфейсах, где важно выводить подсказки, напоминалки для посетителей сайта.
На самом деле реализация тултипов(tooltip) очень проста и не требует вмешательства каких-либо внешних плагинов, все намного проще. Элемент, к которому нужно выводить tooltip, необходимо отметить селектором и атрибутом, в котором будет находиться текст подсказки или даже html. При наведении на элемент текст подсказки будет размещен в блоке тултипа. Сам блок с помощью javascript/jQuery размещаем вблизи с исходным элементом. Остается только стилизовать tooltip.
Итак, приступим:
Размещаем html со следующим содержанием:
Супермен
Человек-паук
Железный человек
Халк
Стилизуем элементы и всплывающий тултип:
.tool-item{ /* элементы */ border-bottom: 1px dashed black; display button: inline-block; margin-right: 20px; cursor: pointer; } .tooltip-block{ /* тултип */ position: absolute; background: white; border: 1px solid rgb(230, 230, 230); padding: 5px 8px; font-size: 10px; width: 140px; line-height: 13px; color: rgb(82, 82, 82); z-index: 400; display button:none; }Javascript/jQuery:
$(document).ready(function(){//страница загрузилась $(".tool-item").hover(function(){ //при наведении на элемент: var helptext = $(this).attr("data") //текст подсказки $(".tooltip-block").html(helptext).show(); //размещаем текст подсказки в блок тултипа и делаем его видимым //далее устанавливаем тултипу значения позиции с помощью абсолютного позиционирования: //позиция элемента сверху + высота элемента -> $(this).offset().top+$(this).height() //позиция элемента слева -> $(this).offset().left $(".tooltip-block").offset({top:$(this).offset().top+$(this).height(),left:$(this).offset().left}); },function(){ $(".tooltip-block").hide(); //скрываем тултип }); }); //в итоге подсказка окажется ровно под элементом наведенияПример скрипта, который размещает tooltip справа от элемента наведения:
$(document).ready(function(){//страница загрузилась $(".tool-item").hover(function(){ //при наведении на элемент: var helptext = $(this).attr("data") //текст подсказки $(".tooltip-block").html(helptext).show(); //размещаем текст подсказки в блок тултипа и делаем его видимым //далее устанавливаем тултипу значения позиции с помощью абсолютного позиционирования: //позиция элемента сверху -> $(this).offset().top //позиция элемента слева -> $(this).offset().left+$(this).width()+5 $(this).offset().left$(".tooltip-block").offset({top:$(this).offset().top,left:$(this).offset().left+$(this).width()+5}); },function(){ $(".tooltip-block").hide(); //скрываем тултип }); }); //в итоге подсказка окажется справа от элемента наведенияМожно фантазировать над стилизацией тултипа: добавить уголок, придать тень, эффекты открытия блока и так далее. Например, на нашем сайте вы можете увидеть тултип на левой панели, работа основана на той же идее, которую мы рассмотрели в данной статье.
