Изменение картинки при наведении курсора

[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 будет

.slot .desc {
    background: url("../images/day_slot_bg.png") repeat scroll 0 0 transparent;
    color: #EDEDED;
    text-shadow: 1px 1px 0 #000000;


}

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

 

[Stanislav]

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

 

[Stanislav]

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

 

[kreol]

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

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

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

странно. вот замените полностью .slot .desc все та же строка 47

.slot .desc {
    background: url("http://frangipani.com.ua/templates/sakura/images/sl1-1.jpg") repeat scroll 0 0 transparent;
    color: #EDEDED;
    text-shadow: 1px 1px 0 #000000;


}

Но опять же для того, чтобы на разных картинках разное было надо скорее всего менять 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]

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