Технический форум
Вернуться   Технический форум > Программирование > Форум программистов > Изготовление сайтов


Ответ
 
Опции темы Опции просмотра
Старый 08.06.2012, 14:50   #1 (permalink)
Stanislav
Member
 
Регистрация: 25.05.2008
Сообщений: 152
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
По умолчанию Изменение картинки при наведении курсора

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

Код:

/* [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;
}
Stanislav вне форума   Ответить с цитированием

Старый 08.06.2012, 14:50
Helpmaster
Member
 
Аватар для Helpmaster
 
Регистрация: 08.03.2016
Сообщений: 0

Аналогичные вашей темы участники форума создавали ранее, прочитайте их

Как вставить картинки в свой пост
Самопроизвольное движение курсора
А как тут картинки вставлять?
Интерактивные картинки
Троянские картинки
Не сохраняются картинки.

Старый 08.06.2012, 21:53   #2 (permalink)
kreol
Member
 
Аватар для kreol
 
Регистрация: 27.02.2010
Сообщений: 659
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 1312
По умолчанию

лучше, если возможно дали бы ссылку на сайт(в личку).
так довольно сложно сказать где именно... но нужно смотреть в сторону вот таких конструкций :hover
kreol вне форума   Ответить с цитированием
Старый 09.06.2012, 01:50   #3 (permalink)
Stanislav
Member
 
Регистрация: 25.05.2008
Сообщений: 152
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
По умолчанию

Отписался в ЛС.
Stanislav вне форума   Ответить с цитированием
Старый 09.06.2012, 01:54   #4 (permalink)
kreol
Member
 
Аватар для kreol
 
Регистрация: 27.02.2010
Сообщений: 659
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 1312
По умолчанию

в папке 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 и вставляйте свою картинку. только для нормального отображения нужно ставить или "чистую" картинку(одноцветную например или с градиентом), а то там повторение есть...
kreol вне форума   Ответить с цитированием
Старый 09.06.2012, 02:04   #5 (permalink)
Stanislav
Member
 
Регистрация: 25.05.2008
Сообщений: 152
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
По умолчанию

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

Яндекс

Member
 
Регистрация: 31.10.2006
Сообщений: 40200
Записей в дневнике: 0
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 55070
Старый 09.06.2012, 14:14   #6 (permalink)
Stanislav
Member
 
Регистрация: 25.05.2008
Сообщений: 152
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
По умолчанию

Я попробовал заменить day_slot_bg.png на прозрачную картинку, затемнение ушло, но вот сделать теперь подмену, чтобы ч.б картинка заменялась на аналогичную цветную при наведении курсора уже не получается...
Stanislav вне форума   Ответить с цитированием
Старый 10.06.2012, 01:03   #7 (permalink)
kreol
Member
 
Аватар для kreol
 
Регистрация: 27.02.2010
Сообщений: 659
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 1312
По умолчанию

Цитата:
Сообщение от Stanislav Посмотреть сообщение
А как сделать, чтобы на разных слайдах разные картинки были? У меня ведь под каждым слайдом своя ссылка будет...
Логика смены происходит скорее всего с помощью javascript так что надо разбираться с ним.

Цитата:
Сообщение от Stanislav Посмотреть сообщение
Я попробовал заменить 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
kreol вне форума   Ответить с цитированием
Старый 10.06.2012, 15:10   #8 (permalink)
Stanislav
Member
 
Регистрация: 25.05.2008
Сообщений: 152
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
По умолчанию

Проблему решил путем подстановки второй картинки в 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>

Все работает, но теперь другая проблема: при перелистывании на соседнюю рамку (она имеет меньший размер), ч.б картинка пропорционально уменьшается, а цветная - нет.
Stanislav вне форума   Ответить с цитированием
Старый 11.06.2012, 11:04   #9 (permalink)
kreol
Member
 
Аватар для kreol
 
Регистрация: 27.02.2010
Сообщений: 659
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 1312
По умолчанию

вообще не пойму о чем вы... Разницы в черно белой и цветной для сайта нету.
kreol вне форума   Ответить с цитированием
Старый 11.06.2012, 13:16   #10 (permalink)
Stanislav
Member
 
Регистрация: 25.05.2008
Сообщений: 152
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
По умолчанию

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

Яндекс

Member
 
Регистрация: 31.10.2006
Сообщений: 40200
Записей в дневнике: 0
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 55070
Ответ

Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Выкл.
HTML код Выкл.
Trackbacks are Вкл.
Pingbacks are Вкл.
Refbacks are Выкл.




Часовой пояс GMT +4, время: 09:49.

Powered by vBulletin® Version 6.2.5.
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.