<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>دموی ابزار کتابخانه</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("ul.bookRacks li").prepend('<div class="divLamp" style="width:182px; height:135px; display:none; position:absolute"><img class="lamp" src="https://rozup.ir/up/moisrex/Pictures/tools/library/library_lamp.png" /></div>');
$("a.bookHover").html('<img class="bookSpacer" src="https://rozup.ir/up/moisrex/Pictures/tools/library/spacer.gif"/>');
$("ul.selectedPersons li a").hover(function() {
$(this).children("div.personHover").stop(true, true).fadeIn("fast");
}, function() {
$(this).children("div.personHover").fadeOut("slow");
});
$("a.bookHover, div#tooltip").mousemove(function(e) {
$("div#tooltip").css({"top":e.pageY + 30,"left":e.pageX - parseInt($("div#tooltip").outerWidth() / 2) - 1,"display":"block"})
});
$("a.bookHover").hover(function(e) {
if ($.browser.msie) {
$(this).parent("li").children(".divLamp").stop(true, true).fadeIn("slow");
} else {
$(this).parent("li").children(".divLamp").stop(true, true).fadeIn("fast");
}
$("div#tooltip").text($(this).attr("rel")).stop(true, true).fadeIn("fast");
}, function() {
$(this).parent("li").children(".divLamp").fadeOut("slow");
$("div#tooltip").fadeOut("fast")
});
for (i = 1; i <= $("ul.bookRacks li").length; i++) {
if (i % 3 != 0) {
$("ul.bookRacks li:eq(" + i + ")").css("margin-right", -44);
}
}
});
</script>
<style>
.bookRacks{list-style:none; display:inline; float:right; width:558px; padding:0; margin:20px; overflow:hidden;}
.bookRacks li{display:inline; float:right; width:182px; height:135px; margin:0 49px 21px 0; background-position:59px 27px; background-repeat:no-repeat;background-size:65px 97px;}
.bookRacks li img.lamp{background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#01FFFFFF,endColorstr=#01FFFFFF)"; /* IE8 */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#01FFFFFF,endColorstr=#01FFFFFF);/* IE6 & 7 */zoom: 1;}
.bookSpacer{position:absolute; width:65px; height:97px; margin:27px 58px 0 0; border:0;}
.library{display:inline;float:right;width:640px;padding-top:50px;background:url(http://baghbagho.com/wp-content/uploads/2012/08/shelf.jpg) center top no-repeat;border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-khtml-border-radius:5px;overflow:hidden;}
#tooltip { position:absolute; z-index:1000; display:none; background:#000; color:#FFF; padding:5px 10px; border:1px solid #FFF; border-radius:5px;font:11px tahoma;}
</style>
</head>
<body>
<div id="tooltip"></div>
<center>
<center style="width:640px;">
<div class="library">
<ul class="bookRacks">
<li style="background-image:url(https://rozup.ir/up/moisrex/Pictures/tools/library/smps1.jpg)"><a href="#moisrex" rel="moisrex" class="bookHover"></a></li>
<li style="background-image:url(https://rozup.ir/up/moisrex/Pictures/tools/library/smps2.jpg)"><a href="#moisrex" rel="moisrex" class="bookHover"></a></li>
<li style="background-image:url(https://rozup.ir/up/moisrex/Pictures/tools/library/smps3.jpg)"><a href="#moisrex" rel="moisrex" class="bookHover"></a></li>
<li style="background-image:url(https://rozup.ir/up/moisrex/Pictures/tools/library/smps4.jpg)"><a href="#moisrex" rel="moisrex" class="bookHover"></a></li>
<li style="background-image:url(https://rozup.ir/up/moisrex/Pictures/tools/library/smps5.jpg)"><a href="#moisrex" rel="moisrex" class="bookHover"></a></li>
<li style="background-image:url(https://rozup.ir/up/moisrex/Pictures/tools/library/smps6.jpg)"><a href="#moisrex" rel="moisrex" class="bookHover"></a></li>
</ul>
</div>
</center>
</center>
</body>
</html>
حمایت شده: