SEO Сообщество: Спрашивайте и помогайте

Присоединяйтесь к сообществу профессиональных веб-мастеров PR-CY, отвечайте на вопросы коллег и задавайте свои.

Q&A SEO

Люди помогите

Budun Budun  
46
  23.01.2013 17:37       711    
Помогите пожалуйста написать HTML и CSS   (этих картинок)  или вытянуть с этого сайта.
То есть хочу применить hover, что бы была смена картинки при наведении.
Что знал прописал, но у меня картинки получилисьактивные.




Ответы на пост (8) Написать ответ
raen1 raen1
38
23.01.2013 17:51
скачивай сайт с помощью teleport pro, а дальше разбирайся.
0
dioret dioret
21
23.01.2013 17:54
1 фотка идет как фон, а вторая уже появляется принаведении
0
Budun Budun
46
23.01.2013 18:36
Помогите подкорректировать этот HTML, из за него картинки активные.
<div class="list_links">
http://#">
<div class="div1"></div>
http://#">
<div class="div2"></div>
</a>
http://#">
<div class="div3"></div>
</a>
http://#">
<div class="div4"></div>
</a>
</div>
0
Kimin Kimin
872
23.01.2013 18:40
Вторая - при наведении
0
Kimin Kimin
872
23.01.2013 18:43
Для CSS:
ul li a:hover 
ul li a.act
0
Kimin Kimin
872
23.01.2013 18:44
И почему у тебя не прописано img src?
0
Budun Budun
46
23.01.2013 19:03
В верху HTML
Это CSS
.list_links a {display: block;width: 0px;}
.list_links .div1 {
display: block;
position: relative;
top: 50px;
left: 125px;
width: 400px;
height: 600px;
}
.list_links a .div1 {
display: block;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://www.levkachesov.com/uploads/photos/ae9e3434c1a227f.jpeg");
background-origin: padding-box;
background-position: 0 0;
background-repeat: no-repeat;
background-size: auto auto;
text-indent: -9999px;
}
.list_links a:hover .div1 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://www.levkachesov.com/uploads/photos_rollover/ae9e3434c1a227f.jpeg");
background-repeat: no-repeat;
background-origin: padding-box;
background-position: left top;
background-size: auto auto;
opacity: 0.83!important; /* Полу прозрачность элемента */
}
.list_links .div2 {
display: block;
position: relative;
top: 35px;
left: 130px;
width: 180px;
height: 65px;
}
.list_links a .div2 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
display: block;
}
.list_links a:hover .div2 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://kompcenter.net.ua/images/doska_menu_ege.gif");
background-origin: padding-box;
background-position: left top;
background-repeat: no-repeat;
background-size: auto auto;
}
.list_links .div3 {
display: block;
position: relative;
top: 15px;
left: 125px;
width: 180px;
height: 65px;
}
.list_links a .div3 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
display: block;
}
.list_links a:hover .div3 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://kompcenter.net.ua/images/doska_menu_ege.gif");
background-origin: padding-box;
background-position: left top;
background-repeat: no-repeat;
background-size: auto auto;
}
.list_links .div4 {
display: block;
position: relative;
top: 8px;
left: 115px;
width: 180px;
height: 65px;
}
.list_links a .div4 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
display: block;
}
.list_links a:hover .div4 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://kompcenter.net.ua/images/doska_menu_ege.gif");
background-origin: padding-box;
background-position: left top;
background-repeat: no-repeat;
background-size: auto auto;
}
0