<!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=windows-1251" />
<title>Документ Без Имени</title>
<script type="text/javascript">
</script>
<style type="text/css">
#gallery {
width:570px;
height:375px;
background:#CCCCCC;
border-radius:15px;
margin:0px auto
}
#lpic{
position:relative;
float:left;
width:370px;
height:365px;
background:#666666;
border-radius:12px;
margin:5px;
}
#spic{
width:185px;
height:365px;
background:#666666;
border-radius:12px;
top:5px;
margin-left:380px;
position:relative;
}
div#spic img {
width:85px; height:85px;
position:relative;
left:5px;
margin-top:5px;
border-radius:8px;
}
div#spic img:hover {
width:81px;
height:81px;
position:relative;
left:5px;
margin-top:5px;
border-radius:8px;
border:dashed 2px #cccccc;
}
div#lpic img {
width:360px;
height:355px;
position:absolute;
left:5px;
margin-top:5px;
border-radius:8px;
background:#FFFFFF;
z-index:0;
}
div#alt{
margin-bottom:0!important;
bottom:0!important;
margin-top:auto;
position:absolute;
z-index:1;
opacity:0.6;
display:none;
width:360px;
height:60px;
background:#666666;
border-bottom-left-radius:8px;
border-bottom-right-radius:7px;
left:5px;
font-size:28px;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
$("#spic img").click(function() {
$("#largepic").attr("src",$(this).attr("src"));
('#largepic').attr('alt',$(this).attr("alt"));
});
$('#lpic').hover(function(){
$('#alt').slideDown('slow'); $('#alt').htm1( $('#1argepic').attr("alt") );},
function(){$('#alt').slideUp('slow');
});
});
</script>
</head>
<body>
<div id='gallery'>
<div id='lpic'>
<div id='alt'></div>
<img id='largepic'/>
</div>
<div id='spic'>
<img alt="pic1" src="http://im4-tub-ua.yandex.net/i?id=225745906-46-72"/>
<img alt="pic2" src="http://im4-tub-ua.yandex.net/i?id=225745906-46-72&n=17"/>
<img alt="pic3" src="http://im8-tub-ua.yandex.net/i?id=5648272-06-72"/>
<img alt="pic4" src="http://im6-tub-ua.yandex.net/i?id=367196349-12-72"/>
<img alt="pic5" src="http://im5-tub-ua.yandex.net/i?id=107622380-10-72"/>
<img alt="pic6" src="http://im5-tub-ua.yandex.net/i?id=321975975-33-72"/>
<img alt="pic7" src="http://im6-tub-ua.yandex.net/i?id=367196349-12-72"/>
<img alt="pic8" src="http://im8-tub-ua.yandex.net/i?id=465839557-47-72"/>
</div>
</div>
</body>
</html>