<!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>
<style type="text/css">
h2 {clear:both;padding-top:20px;}
ul {list-style:none;margin:0;padding:0;}
li {float:left;width:100px; height: 584px;margin:0;padding:0;text-align:center;}
li a {display:block;height:100%;color:#FFF;text-decoration:none;}
li a:hover, li a:focus, li a:active {background-position:-100px 0;}
#k a {background:url(img/menu_painting.jpg) repeat 0 0;}
#b a {background:url(img/menu_photo.jpg) repeat 0 0;}
#c a {background:url(img/menu_glas.jpg) repeat 0 0;}
#d a {background:url(img/menu_museum.jpg) repeat 0 0;}
#e a {background:url(img/menu_exgibition.jpg) repeat 0 0;}
#f a {background:url(img/menu_about.jpg) repeat 0 0;}
#g a {background:url(img/menu_blog.jpg) repeat 0 0;}
#h a {background:url(img/menu_feedback.jpg) repeat 0 0;}
</style>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.bgpos.js"></script>
<script type="text/javascript">
$(function(){
$('#sl a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-100px 0)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-200px 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
});
</script>
</head>
<body>
<h2>Главный модуль</h2>
<ul id="sl">
<li id="k"><a href="#">Painting</a></li>
<li id="b"><a href="#">Photo</a></li>
<li id="c"><a href="#">Glas</a></li>
<li id="d"><a href="#">Museum</a></li>
<li id="e"><a href="#">Exgibition</a></li>
<li id="f"><a href="#">About</a></li>
<li id="g"><a href="#">Blog</a></li>
<li id="h"><a href="#">Feedback</a></li>
</ul>
</body>
</html> |