шортики...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
body{
height: 2000px;
width: 2000px;
padding: 0px;
margin: 0px;
}
#preview{
position:absolute;
border:1px solid #ccc;
background:#FFF;
padding:5px;
color:#03F;
z-index: 100;
display: none;
}
.block{
min-height: 400px;
position: relative;
top: 300px;
left: 350px;
}
</style>
<script>
jQuery.fn.center = function(event)
{
var w = $(window),
top = (w.height()-this.outerHeight(true))+w.scrollTop() -(event.pageY+22),
left = (w.width()-this.outerWidth(true))+w.scrollLeft() -(event.pageX+7);
this.css("position", "absolute");
this.css("top", top > 0? event.pageY+22: (event.pageY-this.outerHeight(true)) + "px");
this.css("left", left> 0? event.pageX+7: (event.pageX-this.outerWidth(true))+"px");
return this;
}
$(document).ready(function ()
{
$(".block img").mousemove(function (event)
{
$("#preview").center(event);
}
)
$(".block img").mouseenter(function ()
{
$("#preview").attr({'src': $(this).parent().data('src')})
.stop(true, true).fadeIn()
}
)
$(".block img").mouseleave(function ()
{
$("#preview").stop(true, true).fadeOut();
}
)
}
)
</script>
</head>
<body> <img id="preview" >
<div class='block'>
<a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50' /></a>
<a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50' /></a>
<a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50' /></a>
<a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50' /></a>
</div>
</body>
</html>