<html>
<head>
<style type="text/css">
div.txt {
height: 20px;
border: 1px solid;
}
div.box {
background-color: ;
display: none;
border: 1px solid;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script>
<script type="text/javascript">
function posMouse(e){
var mouX = 0, mouY = 0;
if (!e) e = window.event;
if (e.pageX || e.pageY) {
mouX = e.pageX;
mouY = e.pageY;
} else if (e.clientX || e.clientY) {
mouX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
mouY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"x":mouX, "y":mouY}
}
$(document).ready(function(){
$('div.txt').mouseover(function(){
$(this).next().slideDown('slow');
})
.mouseout(function(e){
var elem = $(this).next(), mou = posMouse(e);
if ((mou.x < elem.offset().left) || (mou.x > elem.offset().left + elem.width()) || (mou.y < elem.offset().top))
elem.slideUp('slow');
});
$('div.box').mouseleave(function(){
$(this).slideUp('slow');
});
});
</script>
</head>
<body>
<table border=0 cellpadding=3 cellspacing=1 width="100%">
<tr width=100% valign="top">
<td width=50%><div class='txt'>Описание</div>
<div class='box'><img src="" alt="Фотография" width="200" height="70"> Бла бла бла бла бла бла бла бла бла бла бла бла бла блабла бла бла бла бла бла бла бла бла бла бла бла</div></td>
<td width=20%><div class='txt'>Оцените статью</div>
<div class='box'>А тут какой то php скрипт каторый выводит рейтинг статьи в виде картиног где можно проголосовать</div></td>
<td width=30%><div class='txt'>Добавить в избраное</div>
<div class='box'>Если вам понравилась статья то можете <a href="http://site.ru">Добавить в избранное</a> и быть в курсе самый новых обновлений на сайте</div></td>
</tr>
</table>
Бла бла бла бла бла бла бла бла бла бла бла бла бла блабла бла бла бла бла бла бла бла бла бла бла бла Бла бла бла бла бла бла бла бла бла бла бла бла бла блабла бла бла бла бла бла бла бла бла бла бла бла
</body>
</html>