<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>