Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > всплывающее окно

Автор: rthsobakas 2.9.2009, 12:51

есть окно

Код


<html>
<head>
<script type="text/javascript">
function f1(){
 var d=document.createElement('div');
 document.body.appendChild(d);
 d.style.cssText='position:absolute;left:200px;top:200px;border:1px dashed #0F0';
 var i=document.createElement('img');
 i.src='bla.jpg'
 d.appendChild(i);
}
</script>
</head>
<body>
<input type="button" value="Show" onmove="f1();">
</body>
</html>

1)при наведении на кнопку ,картинка не появляется, почему?
2) если использовать onclick ,то картинка появится и сам не закроется. А как сделать чтобы при наведении на кнопку(ссылку),то появлялась сообщение,если курсор не наведен,то она(картинка) пропадает?
3)Left:200px;top:200px; это же не центр экрана. А какие константы размера окна? Чтобы центрировать по экрану.

Автор: Amphiluke 2.9.2009, 13:10

1. Что за событие onmove?
2. Зачем каждый раз создавать объекты, когда можно один раз создать at design time, и при наведении (onmouseover) показывать, а при уходе курсора (onmouseout) — прятать.
3. См. (2) + в CSS {left: 50%; margin-left: /*минус полширины*/}

Добавлено через 6 минут и 45 секунд

Код


<!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>Template</title>
   <style type="text/css">
      .div_class {
         border: 3px solid #000000;
         display: none;
         height: 100px;
         left: 50%;
         margin: -50px 0px 0px -50px;
         position: absolute; /* fixed? */
         top: 50%;
         width: 100px;
      }
   </style>
   <script type="text/javascript">
      function showhide(action) {
         document.getElementById("d").style.display = (action == "show") ? "block" : "none";
      }
   </script>
</head>
<body>
   <p><input type="button" onmouseover="showhide('show');" onmouseout="showhide('hide');" value="button" /></p>
   <div id="d" class="div_class"><img src="blah.jpg" alt="blah" /></div>
</body>
</html>

Автор: rthsobakas 2.9.2009, 13:17

Amphiluke,
3) в процентах.... Да точно. Left:50%;top:50%; в опере не по центру почему то,хотя в других тоже.Ладно сделаю по 20% пусть так будет тогда.
2)А вот непонятно куда onmouseout запихать.

Код


<input type="button" value="Show" onmouseover="f1();">

1)это onmouseover просто я забыл как она пишется.

Добавлено через 1 минуту и 55 секунд
а теперь ясно

Автор: rthsobakas 2.9.2009, 13:33

cтоп. А если этот код

Код


<div id="d" class="div_class"><img src="blah.jpg" alt="blah" /></div>

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

Автор: Amphiluke 2.9.2009, 13:37

Цитата(rthsobakas @ 2.9.2009, 13:33

)

Он растянет мне весь контент тогда.

А с какой стати? Контейнер ведь абсолютно позиционирован, т.е. он вне «общего потока»

Автор: rthsobakas 2.9.2009, 13:39

position: absolute; /* fixed? */ из-за этого?

Автор: Amphiluke 2.9.2009, 13:41

Угу. На выбор.

Добавлено через 2 минуты и 32 секунды
Кстати, можно еще добавить в стиль класса

Код


z-index: 10000;