Шаг 1
Для начала создайте папку, например folder, и поместите в ее директорию файл index.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, который должен содержать следующий код:
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.
В итоге, после выполнения вышеописанных действий, в окне нашего браузера Вы можете увидеть следующее:
всплывающие подсказки
Для того, чтобы увидеть всплывающий блок в действии, Вам необходимо навести курсор мышки на изображение. После наведения в окне Вашего браузера появится всплывающий блок:
всплывающие подсказки
Шаг
Разберем данный урок более подробно, чтобы понять, как все устроено. Для этого нам будет необходимо рассмотреть код файла index.html и style.css.
Для того, чтобы достичь необходимого нам эффекта, появления всплывающей подсказки (блока), следует создать два блока и написать мини-скрипт, который отвечает за их взаимодействие.
Итак, создаем блок 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/JavaScript (jQuery). Но, просмотрев данный урок, не думайте, что данная вещь бесполезна. Используется она довольно часто, и Вы ни один раз еще столкнетесь с нею. Немного изменив дизайн, она подойдет под любой всплывающий объект, начиная от маленькой подсказки и заканчивая мини-страничкой.