За последние 24 часа нас посетили 59926 программистов и 1783 робота. Сейчас ищут 857 программистов ...

Всплывающее сообщение

Тема в разделе "JavaScript и AJAX", создана пользователем Golovastik, 10 авг 2010.

  1. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Как сделать всплывающее сообщение при наведении мышкой, чтоб оно появлялось, а потом простояв 4 сек. опускалось вниз обратно? Вот попробовал так ,что-то не выходит. Как надо?
    Код (Text):
    1.  
    2. <html><head>
    3. <title>Тренировочный документ</title>
    4. <script type='text/javascript'>
    5. function im(){
    6. document.write('<img style='margin-left:500px; margin-top:400px;' src="1.gif" alt='Подсказка'>');
    7. }
    8.  
    9.  
    10. function bounty(){
    11. setTimeout("im(),4000");
    12. }
    13.  
    14. </script>
    15. </head>
    16. <body>
    17.  
    18. <input type='button' value='knopka' onClick='bounty()'>
    19.  
    20. </body>
    21. </html>
     
  2. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Как сделать чтоб при наведении мышкой на ссылку, всплывало мое изображение с задержкой 4 секунды.
     
  3. Psih

    Psih Активный пользователь
    Команда форума Модератор

    С нами с:
    28 дек 2006
    Сообщения:
    2.678
    Симпатии:
    6
    Адрес:
    Рига, Латвия
    setTimeout + не использовать document.write, т.к. он не работает в таком контексте. Вам нужно document.createElement.
     
  4. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Как сделать чтоб при наведении мышкой на ссылку, всплывало мое изображение с задержкой 4 секунды.
    один посоветовал так.Написал так, при наведении мышкой на ссылку в браузере ИЕ, выдаёт сообщение.
    Требуется объект Строка 11 Символ 5

    Код (Text):
    1. <html><head>
    2. <title>Тренировочный документ</title>
    3. <script type='text/javascript'>
    4.  
    5. var bounty_obj = document.getElementById('hint');
    6. function bounty_show() {
    7.     if (bounty_hide.T) {
    8.         clearTimeout(bounty_hide.T);
    9.         bounty_hide.T = 0;
    10.     };
    11.     bounty_obj.style.display = 'block';
    12. };
    13. function bounty_hide() {
    14.     if (bounty_hide.T) {
    15.         clearTimeout(bounty_hide.T);
    16.         bounty_hide.T = 0;
    17.     };
    18.     bounty_hide.T = setTimeout(function(){
    19.         bounty_obj.style.display = 'none';
    20.         bounty_hide.T = 0;
    21.     }, 4000);
    22. };
    23.  
    24. </script>
    25. </head>
    26. <body>
    27.  
    28. <a href='page.html' onMouseOver='bounty_show()' onMouseOut='bounty_hide()'>Переход в будующее</a>
    29. <div id="hint" style="display:none"><img src='1.gif' alt='Информация'></div>
    30.  
    31. </body>
    32. </html>
     
  5. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Всё исправил.
    Ещё момент, скажите как сделать, чтоб картинка выехала, постояла 2 секунда и опять заехала. Думаю что цикл нужен и смена координат за каждой итераций, но как именно это в коде написать не знаю. Подскажите как это сделать. Заранее
    благодарю.
     
  6. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    Golovastik
    ну эффекты выезда и въезда =) хорошо работают на jquery - париться не надо. останется только таймер прикрутить на первое и второе.
     
  7. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    JAvaScript как такое на нём примерно делается?
    По поводу предыдущего кода:
    В функции bounty_show()
    Там делается сравнение
    Код (Text):
    1. if (bounty_hide.T) {
    2. clearTimeout(bounty_hide.T);
    3. bounty_hide.T = 0;
    Что будет означать вот это с точкой bounty_hide.T в сравнении?
    Это значит доступ через мою созданную функцию с именем bounty_hide к какой-то другой переменной находящейся в другой функции что ли?
    Меня смущает .Т, почему она может ещё и добавлятся к названию любой функции где угодно?
     
  8. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Вот так вроде меньше код.
    Код (Text):
    1.  
    2. <html><head>
    3. <title>Тренировочный документ</title>
    4. <script type='text/javascript'>
    5. var bounty_obj;
    6. window.onload = function(){
    7. bounty_obj = document.getElementById('hint');
    8. }
    9.  
    10. function bounty_show() {
    11.     bounty_obj.style.display = 'block';
    12. };
    13. function bounty_hide() {
    14.     setTimeout(function(){
    15.         bounty_obj.style.display = 'none';
    16.     }, 4000);
    17. };
    18. </script>
    19. </head>
    20. <body
    21. <a href='page.html' onMouseOver='bounty_show()' onMouseOut='bounty_hide()'>Переход в будующее</a>
    22. <div id="hint" style="display:none"><img src='1.gif' alt='Информация'></div>
    23. </body>
    24. </html>
     
  9. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Не ясно место:
    Код (Text):
    1.  
    2. 1)То есть если свойство с именем Т которое получило значение от анонимной функции, то есть если оно его получило,которая что-то возвратила не равна нулю, а чему-то равна? Вот это имеется ввиду в этом месте?
    3. if (bounty_hide.T) {
    4.  
    5. 2)Как можно обращаться к свойству Т, если оно определено ниже, а сравнение идёт выше, использование свойства с именем Т, объекта bounty_hide
    3)Что означает .Т - это свойство объекта bounty_hide?
     
  10. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Вот упрощённый код:
    [js]
    <html>
    <head><title>Document</title>
    <script type='text/javascript'>
    var a,timeoutik;

    function f1(){
    if(timeoutik){
    clearTimeout(timeoutik);
    timeoutik = 0;
    };
    if(!a) a = document.getElementById('tik_tak');
    a.style.display = 'block';
    };

    /*_____________________________________________________________*/

    function f2(){
    if(timeoutik){
    clearTimeout(timeoutik);
    timeoutik = 0;
    };

    timeoutik = setTimeout(function(){
    if(!a) a = document.getElementById('tik_tak');
    a.style.display = 'none';
    },2000);

    };
    </script>

    </head>
    <body>
    <a href='page.html' onMouseOver='f1()' onMouseOut='f2()'>Жми на меня</a>
    <div id="tik_tak" style="display:none;
    position:absolute; left:10px; top:35px;">
    <img src='1.gif' alt='фотка'></div>

    </body>
    </html>
    [/js]

    1)А почему обработчик событий onMouseOut='bounty_hide()'>
    засовывается в онлоад,то есть когда пользователь увёл мышку от текста?

    2)Как может в этой функции

    Код (Text):
    1.  
    2.  function bounty_show() {
    3.     if (bounty_hide_timeout) {
    4.         clearTimeout(bounty_hide_timeout);
    5.         bounty_hide_timeout = 0;
    6.     };
    7.     if (!bounty_obj) bounty_obj = document.getElementById('hint');
    8.     bounty_obj.style.display = 'block';
    9. };
    10.  
    происходит проверка if (bounty_hide_timeout) { на то, содержит ли переменная bounty_hide_timeout что нибудь, если bounty_hide_timeout получает своё значение в теле совсем другой функции,которая находится ниже?
     
  11. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    3)clearTimeout(timeoutik); Без этой строки также работает, значит можно её убрать просто написав
    timeoutik = 0; ?