Изменение картинки при наведении курсора
Кто знает - подскажите пожалуйста! Есть код шаблона сайта, там установлено слайд шоу картинок. При наведении курсора мыши на картинки происходит затемнение изображения, и поверх появлется надпись в форме названия категории. Мне нужно, чтобы вместо затемненея изображения, оно заменялось другой картинкой. Может ли кто-то указать, где в коде строка, когтарая отвечает за это затемнение??
Код: /* [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; } |
лучше, если возможно дали бы ссылку на сайт(в личку).
так довольно сложно сказать где именно... но нужно смотреть в сторону вот таких конструкций :hover |
Отписался в ЛС.
|
в папке templates/sakura/css/ файл day.css
там на строке 47 будет Код:
.slot .desc { |
А как сделать, чтобы на разных слайдах разные картинки были? У меня ведь под каждым слайдом своя ссылка будет...
|
Я попробовал заменить day_slot_bg.png на прозрачную картинку, затемнение ушло, но вот сделать теперь подмену, чтобы ч.б картинка заменялась на аналогичную цветную при наведении курсора уже не получается...
|
Цитата:
Цитата:
Код:
.slot .desc { |
Проблему решил путем подстановки второй картинки в 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> Все работает, но теперь другая проблема: при перелистывании на соседнюю рамку (она имеет меньший размер), ч.б картинка пропорционально уменьшается, а цветная - нет. |
вообще не пойму о чем вы... Разницы в черно белой и цветной для сайта нету.
|
Разницы нет, когда картинка находится в центральном слайде. Когда я нажимаю стрелку и перемещаю данную картинку в левый или правый слайд, ч.б картинка уменьшается и становится по размеру рамки слайда, а при наведении на нее курсора мыши, появляющаяся цветная картинка получается больше и часть ее в рамку не влазит.
|
Часовой пояс GMT +4, время: 00:14. |
Powered by vBulletin® Version 4.5.3
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.