VSEpodrad.ru

<style type="text/css">  
  body{  
  margin:0;  
  padding:50px;  
  text-align:center;  
  font-family:Arial, Helvetica, sans-serif;  
  color:#FFF;  
  background:#000;  
  }  
  a img{border:none;}  
   
  #gallery1{  
  width:663px;  
  height:400px;  
  overflow:hidden;  
  position:relative;  
  z-index:1;  
  margin:0 auto 100px auto;  
  }  
  #tabs1{  
  list-style:none;  
  padding:0;  
  margin:0;  
  width:130px;  
  height:400px;  
  float:left;  
  }  
  #tabs1 li{  
  padding:0;  
  margin:0;  
  float:left;  
  }  
  #tabs1 li a img{  
  display:block;  
  width:120px;  
  height:90px;  
  }  
  #tabs1 li a{  
  display:block;  
  border:5px solid #999;  
  width:120px;  
  height:90px;  
  }  
  #tabs1 li a:hover{border:5px solid #fff;}  
  #tabs1 li a img.fullPic, #gallery1 div{  
  position:absolute;  
  z-index:1;  
  left:130px;  
  top:0;  
  width:533px;  
  height:400px;  
  }  
  #tabs1 li a:hover img.fullPic{z-index:3;}  
  #gallery1 div{  
  z-index:2;  
  background:#242424;  
  }  
  </style>

<div id="gallery1">  
  <ul id="tabs1">  
  <li><a href="#"><img src="images/pic1s.jpg" alt="" /><img src="images/pic1.jpg" class="fullPic" alt="" /></a></li>  
  <li><a href="#"><img src="images/pic2s.jpg" alt="" /><img src="images/pic2.jpg" class="fullPic" alt="" /></a></li>  
  <li><a href="#"><img src="images/pic3s.jpg" alt="" /><img src="images/pic3.jpg" class="fullPic" alt="" /></a></li>  
  <li><a href="#"><img src="images/pic4s.jpg" alt="" /><img src="images/pic4.jpg" class="fullPic" alt="" /></a></li>  
  </ul>  
  <div></div>  
  </div>

<style type="text/css">  
  body{  
  margin:0;  
  padding:50px;  
  text-align:center;  
  font-family:Arial, Helvetica, sans-serif;  
  color:#FFF;  
  background:#000;  
  }  
  a img{border:none;}  
   
  #gallery2{  
  width:663px;  
  height:400px;  
  overflow:hidden;  
  position:relative;  
  z-index:1;  
  margin:0 auto 100px auto;  
  }  
  #tabs2{  
  list-style:none;  
  padding:0;  
  margin:0;  
  width:130px;  
  height:400px;  
  float:left;  
  }  
  #tabs2 li{  
  padding:0;  
  margin:0;  
  float:left;  
  }  
  #tabs2 li a img{  
  display:block;  
  width:120px;  
  height:90px;  
  }  
  #tabs2 li a{  
  display:block;  
  border:5px solid #fff;  
  width:120px;  
  height:90px;  
  }  
  #fullPicBlock{  
  width:533px;  
  height:400px;  
  overflow:hidden;  
  float:left;  
  background:#242424;  
  }  
   
  </style>

<div id="gallery2">  
  <ul id="tabs2">  
  <li><a href="#pic1"><img src="images/pic1s.jpg" alt="" /></a></li>  
  <li><a href="#pic2"><img src="images/pic2s.jpg" alt="" /></a></li>  
  <li><a href="#pic3"><img src="images/pic3s.jpg" alt="" /></a></li>  
  <li><a href="#pic4"><img src="images/pic4s.jpg" alt="" /></a></li>  
  </ul>  
  <div id="fullPicBlock">  
  <div><a name="pic1"></a><img src="images/pic1.jpg" alt="" /></div>  
  <div><a name="pic2"></a><img src="images/pic2.jpg" alt="" /></div>  
  <div><a name="pic3"></a><img src="images/pic3.jpg" alt="" /></div>  
  <div><a name="pic4"></a><img src="images/pic4.jpg" alt="" /></div>  
  </div>  
  </div>