Всплывающая подсказка на HTML, CSS и jQuery

всплывающие подсказки

От автора: Сегодня речь пойдет о таком немаловажном объекте страницы сайта как всплывающая подсказка (всплывающий блок) который мы напишем на HTML, CSS и jQuery. Вещь довольно-таки простая. Очень часто используется на сайтах. Поэтому я решил показать, каким образом она устроена и как работает.

Перед тем, как мы приступим к созданию всплывающей подсказки, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

автор

Автор: Михаил Влащенко

Здравствуйте! Меня зовут Михаил. Мне 22 года. Я — верстальщик-самоучка.

Интересуюсь интернет технологиями. Хобби — кулинария. Свободное время провожу с любимой девушкой и друзьями. Больше всего в мире люблю погонять круглый мячик в хорошей компании (с раннего детства играю в футбол). Постараюсь до Вас донести те знания, которыми уже владею. Как говорится, помоги ближнему своему.

Шаг 1: код всплывающей подсказки HTML и CSS

Для начала создайте папку, например folder, и поместите в ее директорию файл index.html. Этот файл должен содержать следующий HTML-код всплывающей подсказки:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Task - Popup block</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".main_block .img").hover(function() {
		$(this).next(".popup_block").stop(true,true)
                          .animate({opacity: "show", top: "-60"}, "slow");
	}, function() {
		$(this).next(".popup_block").stop(true,true)
                          .animate({opacity: "hide", top: "-85"}, "normal");
	});

});
</script>
</head>
<body>
<div class="main_block">
	<div class="in">
		<div class="img"></div>
		<div class="popup_block"><p>Всем привет!<br/> Я Бенджамин.</p></div>
	</div>
</div>
</body>
</html>

После этого в папке folder создайте папку css и поместите в нее файл style.css, который должен содержать следующий CSS-код всплывающей подсказки:

body {
	margin: 0;
	padding: 0;
}
.main_block {
	margin: 100px 0 0 100px;
	padding: 0;
}
.main_block .in {
	position: relative;
	margin: 0;
	padding: 0;
	float: left;
}
.main_block .img {
	width: 100px;
	height: 89px;
	background: url(../img/img.jpg) no-repeat;
	margin: 0;
	padding: 0;
}
.main_block .img:hover{
	width: 100px;
	height: 89px;
	background: url(../img/img_hover.jpeg) no-repeat;
	margin: 0;
	padding: 0;
}
.main_block .in .popup_block{
	width: 180px;
	height: 55px;
	background: url(../img/poupblock.jpg) no-repeat;
	display: none;
	position: absolute;
	top: -85px;
	margin: 0;
	padding: 0;
}
.main_block .in .popup_block p{
	font: bold oblique 12px Verdana;
	margin: 10px 0 0 15px;
	padding: 0;
}

Не забываем про нашу JS-библиотеку. Создаем в папке folder папку js и помещаем в нее файл jquery-1.4.2.js.

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

всплывающие подсказки

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

всплывающие подсказки

Шаг 2: код всплывающей подсказки jQuery

Разберем данный урок более подробно, чтобы понять, как все устроено. Для этого нам будет необходимо рассмотреть код файла index.html и style.css.

Для того, чтобы достичь необходимого нам эффекта, появления всплывающей подсказки (блока), следует создать два блока и написать мини-скрипт всплывающей подсказки на jQuery, который отвечает за их взаимодействие.

Итак, создаем блок img и блок popup_block. Блок img будет основным блоком, а popup_block – второстепенным, т.е. всплывающим.

Блоку popup_block необходимо обязательно задать следующие свойства: display: none;(блок невидимый), position: absolute; (абсолютное позиционарование).

После этого пишется скрипт:

<script type="text/javascript">
$(document).ready(function(){
	$(".main_block .img").hover(function() {
		$(this).next(".popup_block").stop(true,true)
                          .animate({opacity: "show", top: "-60"}, "slow");
	}, function() {
		$(this).next(".popup_block").stop(true,true)
                          .animate({opacity: "hide", top: "-85"}, "normal");
	});

});
</script>

Чтобы все стало более понятным, вот перечень с пояснениями использованных функций и их параметров:

hover – использована для того, чтобы по наведению на блок img появлялся блок popup_block;

animate – функция отвечающая за нестандартное появление и скрытие блока popup_block(появление/скрытие с затуханием).

Функция animate использована в данном примере два раза: один раз для открытия блока popup_block (параметр "show"), второй — для скрытия (параметр "hide"). Хочу привлечь Ваше внимание также к параметрам "slow" и "normal". Они отвечают за скорость появления и скрытия блока img.

Что касается файла style.css, то тут все просто. Стоит обратить внимание на свойства блоков img и popup_block.

Блок img является блоком с фиксированной высотой и шириной (width: 100px; и height: 89px;), имеет фоновое изображение (background: url(../img/img.jpg) no-repeat;). При наведение на него меняет свое фоновое изображение (background: url(../img/img_hover.jpeg) no-repeat;).

Блок popup_block также имеет свое фоновое изображение (background: url(../img/poupblock.jpg) no-repeat;) и высоту с шириной (width: 180px; и height: 55px;).

Как уже было замечено ранее, для того чтобы блок появлялся и мог исчезать, ему необходимо быть изначально невидимым (display: none;) и иметь абсолютное позиционирование (position: absolute;).

Пару слов о блоке in. Он является как бы блоком-родителем. Следовательно, должен иметь относительное позиционирование (position: relative;).

Заключение урока по созданию всплывающей подсказки для сайта.

На простом примере мы создали и разобрали работу всплывающей подсказки на HTML, CSS и jQuery. Но, просмотрев данный урок, не думайте, что данная вещь бесполезна. Используется она довольно часто, и Вы ни один раз еще столкнетесь с нею. Немного изменив дизайн, она подойдет под любой всплывающий объект, начиная от маленькой подсказки и заканчивая мини-страничкой.

киберсант-вебмастер

Автор: Михаил Влащенко

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (19)

  1. Андрей

    А я сделал на много проще. Зачем использовать графику, если она занимает много места. Можно просто, при наведении на определенную область, всплывает простенькая подсказочка, как использовано здесь auto-school.by/vopros_otvet_med_help.html.

    Наведите на «ответ».

  2. Интернетостродалец

    Это конечно интерестно, только вот последнее время как-то живых видеоуроков стало не хватать. Господа, народ требует видеоуроков! Андрей, Виктор, мы уже соскучались по вашим голосам.

  3. VPK

    С картинкой много проще можно сделать просто при помощи CSS задав там параметры тэга title, а вашим способом можно привязывать подсказки не к графическим объектам, например к тексту, заключённому в div?

    • Andrey Bernacki

      Я не автор урока, но если посмотреть по коду, то видно, что подсказка появляется у div-а, для которого картинка задана как фоновая. Поэтому подсказка появляется именно когда курсор находится над div-ом (это видно из этой строки $(«.main_block .img»).hover(function() { ). Так что не принципиально что будет внутри этого блока: картинка, текст или целая таблица. Хотя нужно попробовать, потому что событие hover самое капризное — потому что зразу много hover-ов происходит. То есть, если у нас в этом div-е будет тег p, то по-идее может получиться что событие hover перейдет на тег p внутри div-а, а для него событие не назначено, соответственно подсказка может исчезнуть. Нужно попробовать.

      Ну подождем, может автор урока растолкует ситуацию.

      • Andrey Bernacki

        Заинтересовало, и хоть час ночи уже, а завтра рано вставать, сам все проверил. Вставлял не то что тег p с текстом, вставлял в этот div целую таблицу. Все корректно работает во всех браузерах. Так что пользуемся!))

    • Михаил В.

      Абсолютно верно все сказал Андрей. Эффект появления всплывающей подсказки осуществляется при наведении курсора на блок. А что в блоке, это уже и не важно.

  4. Alfred

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

    • Михаил В.

      Видимо Вы редко сталкиваетесь с версткой. Данная вещь используется очень-очень часто. И она очень-очень полезна, т.к. можно сэкономить очень много места.

  5. Максим

    Классная примочка, мне понравилась!! Обязательно использую в своей практике!

  6. Анна Зинченко

    Спасибо!!!
    За уроки и все что даете ,я только начинаю и хочется все понять и во всем разобраться,пока еще не пробовала сделать но обязательно сделаю.Еще раз спасибо!

  7. Сергей Петрович

    А у меня, как всегда, ничего не вышло… Всё сделал, как сказано в уроке, а рожицы нет… Подумал и понял, что шаг создания папки «image» в уроке не прописан ( типа — умный сам догадается)… создал папку, закачал три файла из исходника, а рожица в браузере так и не появилась… Что не так?

    • Andrey Bernacki

      Высылайте на нашу почту архив с вашими файлами. Нужно смотреть и разбираться почему у вас не так. Думаю проблема с путями к картинкам.

  8. Сергей Петрович

    Удивительно, но всё заработало, спустя какое-то время.
    Теперь другой вопрос: Как эту всплывающую подсказку разместить на index.html уже работающего сайта и куда закачать файлы *css и *js если в корневой папке такие файлы (и папки) уже есть?

  9. Эдуард

    В FF и IE на реальном сайте время от времени перестаёт работать .main_block .img:hover{ !
    В Denwer-е всё ОК!
    Всё равно спасибо!

  10. leonking

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

  11. Инна

    Спасибо, все прекрасно работает

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree