Всплывающая панель с контентом

Информация, представленная в этой статье ориентирована в первую очередь для начинающих web-мастеров.

Пример использования этого эффекта виден при появлении вверху страницы рекламного баннера. Ещё раз оценить данный эффект вы сможете, кликнув на кнопку «Демо-пример». Изображение и текст плавно появляется в новом окне браузера. Размер всплывающего окна можно изменять в настройках. Панель можно вмонтировать в HTML-страницу сайта и в момент выбора и открытия вашей страницы будет открываться в дополнительном всплывающем окне размещённый вами контент.

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

Дело в том, что в варианте размещения кода панели в «чистом виде» на странице, панель, всплывая, будет раздвигать остальной контент сайта, занимая его место. Чтобы это устранить и оставить для панели якобы «пустое место», можно применить способы описанные ниже. Здесь нужно немного пояснить, чтобы не делать лишних действий. Каждый web-мастер знает свой сайт, его строение, структуру, принципы вёрстки. Если у Вас сайт табличной вёрстки, выбирайте варианты установки всплывающей панели с помощью таблиц, если блочной, соответственно на DIV.

Установка всплывающей панели на сайт табличной вёрстки

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

<table align="center" border="0" width="XXX" height="XXX">
<tr><td align="center"> 
Здесь всплывающая панель
</td></tr><tr><td> 
Контент сайта
</td></tr></table>

Скачав учебный материал, распакуйте его в отдельную папку на компьютере. В этой папке находятся две папки (img и js), а также файл demo.html. Откройте файл в вашем браузере и визуально оцените эффект.

Для реализации этого эффекта на вашем сайте необходимо:

1. Подключить Java-скрипты, разместив этот код между тегами head или в body страницы:

<script type="text/javascript" src="js/jquery00.js"></script>
<script type="text/javascript" src="js/jquery01.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#reg_form").show(2500);
});
 </script> 

2. Папки img и js нужно поместить в ту же директорию, где находится файл HTML.

3. Этот участок кода поместить в body страницы:

<table align="center" width="910" border="0">

<tr><td align="center">

<script type="text/javascript">
$(document).ready(function(){
    $("#reg_form").show(2500);
});
 </script> 


<span style="float: center; font: Tahoma;">
<font size="5">Всплывающая панель с контентом</font></span><br><br>
                 <div id="reg_form" style="display:none;">
                 
                 
<table width="100%" border="0" bgcolor="#f7e0d8" cellpadding="15" cellspacing="3">
<tr><td align="center">                   


<img src="img/ipatyevskiy.jpg" border="0" vspace="0" hspace="0" align="middle" width="900" height="600" alt="Ипатьевский монастырь">

<h1 align="center">Вид с моста через Волгу на Ипатьевский монастырь.</h1>


<table align="center" border="0" width="800" cellpadding="0" cellspacing="0">
<tr><td> 

Здесь разместите текст


</td></tr></table>
</td></tr></table>


</div> 

</td></tr></table>

          Проставьте свои параметры таблицы-обрамления.

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

          Впишите ваши названия.

          Цвет фона основной таблицы.

          Параметры вашего изображения.

          Параметры вспомогательной внутренней таблицы.