.
top
logo
Вторник, 26 Сентября 2017 года

Популярная услуга

Оптимизация сайта в Одессе

Услуги

Объявления


Hosting Ukraine

Главная Учебник Разработка Всплывающеи подскаски или всплывающее меню
Всплывающеи подскаски или всплывающее меню PDF Печать E-mail

Всплывающеи подскаски или всплывающее меню

 

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

Сделать такой слой достаточно легко. Для создания нам понадобится небольшие знания в JavaScript ну и соответственно нужно знать хоть немного html и css.

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

<<spanur1|"http: december="" com="" html="" 4="" element="" input="" style="margin: 0px; padding: 0px; line-height: 1.4em;">input type="button" onmouseover="showl();" name="podskazka" value="Показать" />
<<spanur1|"http: december="" com="" html="" 4="" element="" div="" style="margin: 0px; padding: 0px; line-height: 1.4em;">div style="display:none;" id="podskazka" onmouseout="hidel();">
  <<spanur1|"http: december="" com="" html="" 4="" element="" center="" style="margin: 0px; padding: 0px; line-height: 1.4em;">center>
   наша всплывающее подсказка!
  </<spanur1|"http: december="" com="" html="" 4="" element="" center="" style="margin: 0px; padding: 0px; line-height: 1.4em;">center> 
</<spanur1|"http: december="" com="" html="" 4="" element="" div="" style="margin: 0px; padding: 0px; line-height: 1.4em;">div>

В коде выше на первой строчке, код кнопки при наведению на эту кнопку будет появляться всплывающее меню. Всплывающие меню будет работать благодаря команды в кнопке – onmouseoverОnmouseover это событие которое будет происходить при наведении мышки на кнопку. В нашем случае onmouseoverподключает функцию JavaScript – “showl();”.

На второй строчке и дальше наше всплывающее окно. В стиле дива прописалиdisplay:none для того чтобы наш div был невидимым по умолчанию. Через событиеonmouseout будет вызываться функция для того чтобы всплывающее окно исчезало. Событие onmouseout происходит при удаление мышки от слоя.

Теперь в заголовке документа между тегами <head> и </head> подключаем функции javascript:

<script language="javascript">
function showl()
{
document.getElementById("podskazka").style.display="block";
}

function hidel()
{
document.getElementById("podskazka").style.display="none";
}
</script>

В коде выше функция showl() делает наш слой видимым. По умолчание наш слой(podskazka) имеет стиль “display:none;” из за этого он невидимый, а в нашей функции находится id документа под названием “podskazka” и делает его видимым. Соответственно функция hidel() делает невидимым наш слой.

Ну и под конец украсим наш слой стилями:

<style type="text/css">
<!--
#podskazka
{
width: 250px;
height: 250px;
position:absolute;
top:5px;
color:#990000;
background-color:#EBD6D6;
border:1px #330000 solid;
}
-->
</style>

Вот и все. Все очень просто!

Если ищите спортивный и не только форум, то советую этот
 

Это полезно знать


bottom
top

Последние статьи

Способы оплаты

Поиск по сайту

Пожертвования


Пожертвовать

Точные апдейты Яндекса и Google


bottom

Создание сайта в Украине BisnesLuck! Заказать сайт по телефону Установить интернет магазин аренда магазина
Яндекс.Метрика