Помогите сделать всплывающий див при наведении на картинку

Тема в разделе "JavaScript", создана пользователем verfaa, 9 июл 2012.

Модераторы: ZiX
  1. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    373
    Симпатии:
    41
    Есть примерно такой код:
    Код:
    <a href="page1.php" onmouseover='show_block("baloon_1")' onmouseout='hidden_block("baloon_1")' ><img src="http://site.com/996f2037.jpg" /></a>
     
    <a href="page2.php" onmouseover='show_block("baloon_2")' onmouseout='hidden_block("baloon_2")' ><img src="http://site.com/996f2038.jpg" /></a>
     
    ..............
     
     
    <div style='position:relative;'>
    <div class='div_46x55'>
    <div class='baloon-lw' style="left: -180px; top:-210px" id='baloon_1' onmouseover='show_block("baloon_1")' onmouseout='hidden_block("baloon_1")'>
    <p class='lenta_line'><i>кгкг</i></p>
    <a href="/users/id2" onmouseover='show_block("baloon_1")' title='Пользователь Sexy  Баево 24 года'>Sexy </a> <b>,</b> 24 <span class='sexw' id='sex_span' onmouseover='show_block("baloon_1")'>&nbsp;&nbsp;&nbsp;</span><p>Баево</p>
    </div>
    </div>
    </div>
     
     
    
    css:
    Код:
    .baloon-lw{
                -border: 1px solid #ccc;
                position: absolute;
                -left: -170px;
                background: url(../images/baloon-lw.png) no-repeat bottom;
                padding: 25px 10px 10px 30px;
                width: 264px;
                height: 75px;
                z-index:4;
    }
     
    .baloon-lw p{padding-right:20px;}
    
    Нужно написать стили css и js-код, который при наведении мыши показывал бы окошко с инфой, а при уведении мыши это окошко скрывал, т.е. точно также, как на мамбе в ленте:

    [​IMG]


    Помогите плиз написать аналог такого всплывающего окошка.
     
  2. GriZone

    GriZone Управляющий

    Administrator
    Регистр.:
    17 мар 2006
    Сообщения:
    429
    Симпатии:
    2.011
  3. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    korkunov нравится это.
  4. zaxap83

    zaxap83 Постоялец

    Регистр.:
    6 дек 2010
    Сообщения:
    87
    Симпатии:
    28
    Если с jquery
    HTML:
    
    $('.some_block').hover(
       function()
          {
              $(this).parent().find('.show_block').fadeIn()
              
          },
       function()
          {
             $(this).parent().find('.show_block').fadeOut()
          });
    
     
  5. SiZE

    SiZE Постоялец

    Регистр.:
    31 янв 2010
    Сообщения:
    51
    Симпатии:
    10
    Для тега А можешь прописать position:relative; и включить в него после тега img тег div затем в css:

    a div { display: none; } a:hover div { display: block; }

    как вариант ;)