|
Код:
|
<style type="text/css">
#gallery {width:750px; height:780px; padding:10px; border:1px solid #333; background: #CCCCE4; position:relative;}
#gallery b.default {position:absolute; left:10px; top:10px; width:548px; height:701px; text-align:center;}
#gallery b.default img {display:block; width:500px; height:380px; margin:0 auto 10px auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
#gallery b.default span {display:block; color:#000000; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul {list-style:none; padding:0; margin:0; width:180px; position:relative; float:right;}
#gallery ul li {display:inline; width:52px; height:52px; float:left; margin:0 0 5px 5px;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; border:1px solid #000; border-color:#eee #555 #333 #ddd;}
#gallery ul li a span {display:none;}
#gallery ul li a img {display:block; width:50px; height:50px; border:0;}
#gallery ul li a:active{white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:active b{position:absolute; left:-575px; top:0; width:510px; height:380px; text-align:center; background:#CCCCE4; z-index:10;}
#gallery ul li a:active span{display:block; color:#000000; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul li a:active img{margin:0 auto 3px auto; width:575px; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
</style> |
Это стили фото-галереи. Справа есть маленькие квадратики с фотографиями. Когда на них нажимаешь, то они увеличиваются(открываются в полном размере слева), а когда отпускаешь кнопку мыши, то увеличение исчезает. Мне надо, что бы я один раз нажал на увеличение и отпустил, но картинка увеличенная держалась до тех пор, пока я не нажму другую фотографию. Спасибо!