Stanislav

Кто знает - подскажите пожалуйста! Есть код шаблона сайта, там установлено слайд шоу картинок. При наведении курсора мыши на картинки происходит затемнение изображения, и поверх появлется надпись в форме названия категории. Мне нужно, чтобы вместо затемненея изображения, оно заменялось другой картинкой. Может ли кто-то указать, где в коде строка, когтарая отвечает за это затемнение??

Код:

/* [4. Slider] */
#slider{
width: 976px;
height: 236px;
margin: 0 auto -6px auto;
position: relative;
background: url(../images/slider_bg.png) no-repeat center 0;
}
.slot{
position: absolute;
overflow: hidden;
}
.slot ul{
height: 100%;
}
.slot ul li{
position: relative;
}
.slot ul li, .slot ul li img{
float: left;
}
#slot_left li, #slot_right li, #slot_left li img, #slot_right li img{
width: 260px;
height: 155px;
}
#slot_center li, #slot_center li img{
width: 320px;
height: 190px;
}
/*.slot a{
display: none;
position: absolute;
left: 0;
right: 0;
text-decoration: none;
padding: 10px 20px 0px 20px;
width: 220px;
height: 145px;
background: url(../images/night_slot_bg.png) repeat;
color: #ffffff;
text-shadow: 1px 1px 0 #fff;

}
.slot ul li:hover a{
display: block;

}

#slot_center a{
padding: 10px 30px 0px 30px;
width: 260px;
height: 180px;
}*/
.slot h4{
width: 220px;
height: 30px;
padding: 10px 0 0 0;
overflow: hidden;
}
#slot_center h4{
width: 280px;
}
.slot span{
display: block;
width: 220px;
height: 80px;
padding: 0;
overflow: hidden;
}
#slot_center span{
width: 280px;
height: 120px;
}
.slot p{
margin: 0;
padding: 0;
}

/* IE7 z-index bug fix for slider */
div#bg div#header ul#nav li.parent div { z-index: 23; }
div#bg div#header ul#nav li.parent { z-index: 22; }
div#bg div#header ul#nav { z-index: 21; }
div#bg div#header { z-index: 20; }
div#bg div#slider div.slot ul { z-index: 4; }
div#bg div#slider div.slot { z-index: 3; }
div#bg div#slider .do_slide { z-index: 19; }
div#bg div#slider { z-index: 2; }
div#bg { z-index: 1; }

#slides { display: none; }

.slot ul li {
position: absolute;
}
.slot .desc {
visibility: hidden;
top: 0px;
left: 0px;
position: absolute;
z-index: 999;
text-decoration: none;
padding: 10px 20px 0px 20px;
width: 220px;
height: 145px;
background: url(../images/night_slot_bg.png) repeat;
color: #272727;
text-shadow: 1px 1px 0 #e8e8e8;
cursor: pointer;
}
#slot_center.slot .desc {
width: 320px;
height: 190px;
}
#form_prev {
margin: 20px 0 10px;
}
#form_prev_holder .header {
margin: 0;
}

#slot_left, #slot_right{
width: 260px;
height: 155px;
top: 35px;
}
#slot_left{
left: 28px;
}
#slot_right{
right: 28px;
}
#slot_center{
width: 320px;
height: 190px;
top: 10px;
left: 328px;
}
.do_slide{
display: block;
position: absolute;
width: 44px;
height: 44px;
top: 90px;
background-repeat: no-repeat;
background-position: 0 0;
}
.do_slide:hover{

}
.do_slide.left{
left: 0;
background-image: url(../images/do_slide_left.png);
}
.do_slide.right{
right: 0;
background-image: url(../images/do_slide_right.png);
}
#slider_dots{
position: absolute;
width: 100%;
text-align: center;
height: 12px;
left: 0;
bottom: 0;
cursor: default;
}
#slider_dots li{
display: inline-block;
width: 11px;
height: 12px;
cursor: pointer;
padding: 0 2px 0 2px;
background-repeat: no-repeat;
background-position: 0 0;
vertical-align: top;
}
#slider_dots li:hover{
background-position: 0 -12px;
}
#slider_dots li.act{
background-position: 0 -24px;
}

kreol

лучше, если возможно дали бы ссылку на сайт(в личку).
так довольно сложно сказать где именно... но нужно смотреть в сторону вот таких конструкций :hover

Stanislav

Отписался в ЛС.

kreol

в папке templates/sakura/css/ файл day.css
там на строке 47 будет
вот в url и вставляйте свою картинку. только для нормального отображения нужно ставить или "чистую" картинку(одноцветную например или с градиентом), а то там повторение есть...

Stanislav

А как сделать, чтобы на разных слайдах разные картинки были? У меня ведь под каждым слайдом своя ссылка будет...

Stanislav

Я попробовал заменить day_slot_bg.png на прозрачную картинку, затемнение ушло, но вот сделать теперь подмену, чтобы ч.б картинка заменялась на аналогичную цветную при наведении курсора уже не получается...

kreol

Логика смены происходит скорее всего с помощью javascript так что надо разбираться с ним.

странно. вот замените полностью .slot .desc все та же строка 47
Но опять же для того, чтобы на разных картинках разное было надо скорее всего менять js ну и html с css

Stanislav

Проблему решил путем подстановки второй картинки в slider.tpl

<ul id="slides">
<li>
<img src="templates/sakura/images/sl1.jpg" width="320" height="190" />
<div>
<a href="#">
<img src="templates/sakura/images/sl1-1.jpg" width="320" height="190" />
</a>
</div>
</li>

Все работает, но теперь другая проблема: при перелистывании на соседнюю рамку (она имеет меньший размер), ч.б картинка пропорционально уменьшается, а цветная - нет.

kreol

вообще не пойму о чем вы... Разницы в черно белой и цветной для сайта нету.

Stanislav

Разницы нет, когда картинка находится в центральном слайде. Когда я нажимаю стрелку и перемещаю данную картинку в левый или правый слайд, ч.б картинка уменьшается и становится по размеру рамки слайда, а при наведении на нее курсора мыши, появляющаяся цветная картинка получается больше и часть ее в рамку не влазит.