|
Сообщение от Dark_Delphin
|
|
Но можно, чтобы при навидении на шортики он не пропадал, тоесть с него например можно было скопировать текст..
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<script src="http://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");
top = top > 0? event.pageY+22: (event.pageY-this.outerHeight(true));
top < w.scrollTop() && (top = w.scrollTop());
left = left> 0? event.pageX+7: (event.pageX-this.outerWidth(true));
left < w.scrollLeft() && (left = w.scrollLeft()+4);
this.css("top", top + "px");
this.css("left", left +"px");
return this;
}
$(document).ready(function ()
{
$(".block img").mousemove(function (event)
{
$("#preview").center(event);
}
)
$(".block img").mouseenter(function (event)
{
$("#preview").html($(this).parent().data('src'))
.stop(true, true).fadeIn().center(event);
}
)
$(".block img, #preview").mouseleave(function ()
{
$("#preview").stop(true, true).delay(500).fadeOut();
}
)
$("#preview").mouseenter(function (event) {$("#preview").stop(true, true)})
}
)
</script>
</head>
<body> <div id="preview" ></div>
<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>