Для начала посмотрите ПРИМЕР
Если понравилось - переходим к установке
1) Переключение при наведении:
В head:
Code
<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>
Сама галерея прописывается так:
Code
<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>
2) Переключение при клике:
В head вставьте:
Code
<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>
Сама галерея прописывается так:
Code
<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>
Источник http://apocalypse.ucoz.kz
