Всплывающеи подскаски или всплывающее меню
Всплывающеи подскаски или всплывающее меню
Очень часто на веб сайтах требуется сделать некий всплывающий слой, который будет появляться при наведение мышки. Это может быть что угодно, например всплывающее меню или просто всплывающая подсказка.
Сделать такой слой достаточно легко. Для создания нам понадобится небольшие знания в 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>
<<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>
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>
<!--
#podskazka
{
width: 250px;
height: 250px;
position:absolute;
top:5px;
color:#990000;
background-color:#EBD6D6;
border:1px #330000 solid;
}
-->
</style>
Вот и все. Все очень просто!