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

verfaa

Профессор
Регистрация
29 Янв 2007
Сообщения
416
Реакции
49
Есть примерно такой код:
Код:
<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-код, который при наведении мыши показывал бы окошко с инфой, а при уведении мыши это окошко скрывал, т.е. точно также, как на мамбе в ленте:

image_4ffad39a0be33.jpg



Помогите плиз написать аналог такого всплывающего окошка.
 
Если с jquery
HTML:
$('.some_block').hover(
   function()
      {
          $(this).parent().find('.show_block').fadeIn()
          
      },
   function()
      {
         $(this).parent().find('.show_block').fadeOut()
      });
 
Для тега А можешь прописать position:relative; и включить в него после тега img тег div затем в css:

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

как вариант ;)
 
Назад
Сверху