CSS Image a:hover

donsavage

Active Member
Здравейте,искам да си сложа в сайта няколко картинки, които съм ги направър като връзки, но съм ги направил да са черно бели. Целта ми е когато се отиде с мишката на някоя картинка от черно белите, да се показва цветнота картинка. Няколко неща, нно не стават :( какво да првя ?
 
От: CSS Image a:hover

Давам го целият

Код:
/* Tqlo */
body  {background-image: url('img/backround.gif');}
p {text-indent: 0px; width: 550px;}
span    {color: yellow; font-weight: bold;
font-family: verdand, georgia, ariel
}

/* Zaglavie */ 
.hedar_page { position: absolute; top: 368px; left: 236px; color: #fff; font-weight:bold; border:ridge; background: url('img/black_img.gif'); width: 530px; border-color: gray; height: 25px; text-indent: 7px;}  

/* Kod, za nastroika na poziciqta na stranicite i poziciq za razlichnite rezoljucii na monitorite. */
.container {width: 1007px; margin: 0 auto; position: relative;}

/* Chasovnik*/
.clock_up { position: absolute; top: -2px; left: 55px; color: #000;}

/* novini */
.rss {position: absolute; top:1160px; left: 75px;}
.facebookgroup {position: absolute; top:1160px; left: 25px;}
.twitter {position:absolute; top: 1160px; left: 120px;}

/* bqlo pole za sydyrjanieto */
.oblojka {position:relative; margin: 4px auto; padding: 15px;}

/* down background */
.down_backround {position:relative; margin: -37px auto; padding: 15px;}
.up_backround {position:absolute; top: -3px; left: 14px;}

/* poziciq na radio eclipse */
.radioeclipse {position: absolute; top: -4px; left: 21px;}
.radioeclipse a:visited{ color: black; text-decoration: none;}
.radioeclipse a:hover{ color: red; text-decoration: none; font-weight: none;}
.radioeclipse_link_2 {position: absolute; top: -4px; left: 325px; width: 500px;}
.radioeclipse_link_2 a:visited{ color: black; text-decoration: none;}
.radioeclipse_link_2 a:hover{ color: red; text-decoration: none; font-weight: none;}

/* oficialno logo na Info-Comp */
.logo-ic {position: absolute; top: 15px; left: 13px;}

/* обложка за съдържанието */
.oblojka_za_sydyrjanieto {position: absolute; top: 350px; left: 215px;}
/* край на стайла, на обложка за съдържанието. */ 
/* долни разделителни чарти */
.dolna_charta_v_lqvo {position: absolute; top: 1140px; left: 175px; }
.dolna_charta_v_sredata {position: absolute; top: 1140px; left: 625px; }
/* край на позиционирането на долни разделителни чарти */
/* реклами / банери */
.radio_eclipse {position: absolute; top: 20px; right:20px; }
.banner-ct {position: relative; margin: -263px 20px 20px 280px;}
.goren_fon {position: absolute; top: 0px; left: 0px;}
.banner-adx { position: absolute; top: 252px; left: 135px;}
.eset_baner { position: absolute; top: 775px; left: 17px;}
.pcstore_baner { position: absolute; top: 365px; left: 795px;}
.supercars_baner { position: absolute; top: 695px; left: 795px;}
/* край на рекламите / банерите */

/* стил на фен страницата */
.facebook_like_box { position: absolute; top: 355px; left: 15px;}
/* край на стила на фен страницата */

/* горни картинки */
.menu_tools {position: absolute; top: 143px; left: 0px;}
.duno_gore {position: absolute; top: 153px; left: 35px;}
.pamet_gore {position: absolute; top: 159px; left: 80px;}
.hard-disk-gore {position: absolute; top: 152px; left: 173px; }
.video_karta_gore {position: absolute; top: 159px; left: 125px;}
.cpu-gore {position: absolute; top: 154px; left: 220px; }
.printer_gore {position: absolute; top: 151px; left: 476px;}
.power-gore {position: absolute; top: 155px; left: 267px; }
.cd-dvd-gore {position: absolute; top: 159px; left: 316px; }
.zvukovakarta_gore {position: absolute; top: 164px; left: 367px; }
.monitor_gore {position: absolute; top: 151px; left: 420px; }
.scener_gore {position: absolute; top: 150px; left: 549px;}
.floppy_gore {position: absolute; top: 149px; left: 600px; }
.mouse_gore {position: absolute; top: 154px; left: 645px; }
.keyboard_gore {position: absolute; top: 154px; left: 695px; }
.ploter_gore {position: absolute; top: 150px; left: 795px; }
.rom_memury_gore {position: absolute; top: 154px; left: 854px; }
.web_camera_gore {position: absolute; top: 148px; left: 932px; }
/* край на позицията на горнините картинки */

/* текст последни новини */
.polezni_vrzuki {position: absolute; top: 1138px; left: 352px; color: #000; font-weight: bold; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}
.posledni_novini {position: absolute; top: 1138px; left: 25px; color: #000; font-weight: bold; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}
.molq_vseki {position: absolute; top:  1172px; left: 750px; width: 230px; color: black;}
.friends {position: absolute; top: 1238px; left: 750px; color: black; width:230px;}

/* Скриптове */
.bgtop {position:absolute; top: 1205px; left: 35px;}
.web_counter {position: absolute; top: 1295px; left: 100px;}
.posestenie  {position: absolute; top: 1295px; left: 18px;}
.w3css {position: absolute; top: 1215px; left: 647px;}
.earth_uslugi {position: absolute; top: 475px; left: 249px;}
.windows_uslugi {position: absolute; top: 665px; left: 249px;}
.drugi_uslugi {position: absolute; top: 825px; left: 233px;}
.bulgaria_top {position:absolute; top: 1255px; left:35px;}
/* край на скриптове */

/* броячи */

/* Стил на линковете */
a:link {    color: #000;}
a:visited{ color: black; text-decoration: none; font-style: italic;}
a:hover{color: #3399FF; border: 1px solid; border-color: #ccc; font-style: italic;}
a:active {text-decoration: none; color: black; font-style: italic;}
.fast_links1 a:link {color: #000;}  
.fast_links1 {position: relative; margin: -161px 20px 20px 200px; color: black; font-weight: bold; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}
.fast_links2 a:link {color: #000;}
.fast_links2 {position: relative; margin: -145px 20px 20px 380px; color: black; font-weight: bold; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}
.fast_links3 a:link {color: #000;}
.ekip a:link {color: #000;}
.ekip {position: relative; margin: -15px 20px 20px 102px;}
.fast_links3 {position: relative; margin: -145px 20px 20px 510px; color: black; font-weight: bold; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}
.text13_friends {position:absolute; top: 1112px; left: 705px; width:297px; text-align: right; color: #fff; font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}
/* край на стила на линковете */

/* дуги картинки */
.ic_pic_1 {position:absolute; top: 250px; left:40px;}
.ic_pic_2 {position:absolute; top: 250px; left:870px;}
.ic_pic_3 {position: absolute; top: 1140px; left: 645px;}

.ic_pic_3 a:hover{ 
color: #333333;
padding-left: 14px;
font-weight: bold;
background-image: url('http://info-comp.hit.bg/img/ic_logo.png');
background-position: 0 -11px;
background-repeat: no-repeat;
}

/* Авторски права */
.data_ic {position: absolute; top: 1310px; left: 860px; color:#000; font-size:11px;}
.calendar_ic {position: absolute; top: -4px; left: 810px; color:black; font-size:11px;}
.godina_gorno_g {position: absolute; top: -4px; left: 978px; color:#fff; font-size:11px;}
.godina_gorno_chas {position: absolute; top: 3px; left: 753px; color:black; font-size:11px;}
.godina_gorno_data {position: absolute; top: -4px; left: 798px; color:#fff; font-size:11px;}
.down_text_all_Rights_Reserved_by_Info-Comp {position: absolute; top: 1310px; left: 682px; color:#000; font-size:11px;}
.info_comp_information_down {position: absolute; top: 1140px; left: 750px; color:#000; font-size:12px;}
.text12_friends {position: relative; margin: -35px 20px 20px 700px; color:black; width:280px;  font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}    
.downlinks {position: relative; margin: -180px 20px 20px 1px;}
.web_uslugi {position: absolute; top: 17px; left: 150px; font-size: 27pt; text-decoration: underline; font-style: italic;}
.friends_text1 {position: absolute; top: 17px; left: 75px; font-weight: bold; font-size: 27pt; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #ccc;}
.ekip_hedar {position: absolute; top: 2px; left: 45px; font-weight: bold; font-size: 20pt; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #ccc;}
.eclipse_friends_logo {position: absolute; top: 60px; left: 1px; font-weight: bold; font-size: 27pt; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #ccc;}
.eset_logo_friends {position: absolute; top: 260px; left: 335px; font-weight: bold; font-size: 27pt; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #ccc;}
.comptech_logo_friends {position: absolute; top: 510px; left: 5px; font-weight: bold; font-size: 27pt; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #ccc;}
.pretpriamch_logo_friends {position: absolute; top: 775px; left: 15px; font-weight: bold; font-size: 27pt; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #ccc;}
.vitosha_logo_friends {position: absolute; top: 665px; left: 15px; font-weight: bold; font-size: 27pt; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #ccc;}
.dir_logo_friends {position: absolute; top: 770px; left: 260px; font-weight: bold; font-size: 27pt; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #ccc;}
.kartela_logo_friends {position: absolute; top: 70px; left: 335px; font-weight: bold; font-size: 27pt; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #ccc;}
.adxbg_logo_friends {position: absolute; top: 665px; left: 315px; font-weight: bold; font-size: 27pt; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #ccc;}

.eclipse_friends_text {position: absolute; top: 243px; left: 10px; text-align: center; font-weight: bold; font-size: 10pt; width: 180px; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #000;}
.kartela_friends_text {position: absolute; top: 243px; left: 310px; text-align: center; font-weight: bold; font-size: 10pt; width: 180px; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #000;}
.comptech_friends_text {position: absolute; top: 590px; left: 15px; font-weight: bold; text-align:center; font-size: 10pt; width: 480px; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #000;}


.predpriamach_fiends {position: absolute; top: 510px; left: 180px; font-weight: bold; font-size: 10pt; width: 150px; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #000;}
.adx_friends {position: absolute; top: 730px; left: 340px; font-weight: bold; font-size: 10pt; width: 150px; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #000;}
.radio_vitosha_text {position: absolute; top: 730px; left: 25px; text-align:center; font-weight: bold; font-size: 10pt; width: 200px; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #000;}
.pretpriamach_text_friends {position: absolute; top: 830px; left: 25px; text-align:center; font-weight: bold; font-size: 10pt; width: 200px; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #000;}
.dirbg_text_friends {position: absolute; top: 830px; left: 305px; text-align:center; font-weight: bold; font-size: 10pt; width: 200px; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #000;}
.eset_friends_text {position: absolute; top: 470px; left: 310px; text-align: center; font-weight: bold; font-size: 10pt; width: 150px; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #000;}
.pcstore_logo_friends {position: absolute; top: 330px; left: 10px; font-weight: bold; font-size: 10pt; width: 150px; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #000;}
.pcstore_friends_text {position: absolute; top: 460px; left: 80px; font-weight: bold; font-size: 10pt; width: 150px; text-decoration: none; font-style: none; font-family: verdand, georgia, ariel; color: #000;}
.soft_uslugi {position: absolute; top: 197px; left: 130px; font-size: 27pt; text-decoration: underline; font-style: italic;}
.olther_uslugi3 {position: absolute; top: 375px; left: 190px; font-size: 27pt; text-decoration: underline; font-style: italic;}
.soft_uslugi2 {position: absolute; top: 237px; left: 130px; font-size: 15pt; text-decoration: underline; font-style: italic;}
.tablica1 {position: absolute; top: 57px; left: 105px; font-size: 11pt; text-align:center;}
.tablica2 {position: absolute; top: 257px; left: 175px; font-size: 11pt; text-align:center; }
.tablica3 {position: absolute; top: 417px; left: 125px; font-size: 11pt; text-align:center; }
.comptech_text_info_uslugi {position: absolute; top: 987px; left: 345px; font-size: 11pt;  }

/* INDEX */
.index_text1 {position:absolute; top: 25px; left: 260px; width:240px; text-align: right; font-family:Verdana, Arial, Helvetica, sans-serif;}
.index_text2 {position:absolute; top: 167px; left: 0px; width:240px; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif;}
.klaviatura1_index {position: absolute; top: 5px; left: 0px; border-style: inset; border-color: #ccc; border-width: 8px;}
.kartinka2_index { position: absolute; top: 160px; left: 258px; border-style: outset; border-color: #ccc; border-width: 8px;}
.dunn_platka_hardware { position: absolute; top: 70px; left: 1px; border-style: solid; border-color: #ccc; border-width: 4px;}
.kartinka3_index { position: absolute; top: 320px; left: 1px; border-style: inset; border-color: #ccc; border-width: 8px;}
.ekippicds { position: absolute; top: 100px; left: 12px; border-style: inset; border-color: #000; border-width: 8px;}
.ekippicvilly { position: absolute; top: 100px; left: 183px; border-style: inset; border-color: #000; border-width: 8px;}
.ekippiceli { position: absolute; top: 100px; left: 350px; border-style: inset; border-color: #000; border-width: 8px;}
.ekippicmilenka { position: absolute; top: 340px; left: 5px; border-style: inset; border-color: #000; border-width: 8px;}
.ekippicivo { position: absolute; top: 340px; left: 183px; border-style: inset; border-color: #000; border-width: 8px;}
.ekippicbanko { position: absolute; top: 340px; left: 350px; border-style: inset; border-color: #000; border-width: 8px;}
.index_text3 {position:absolute; top: 325px; left: 267px; width:230px; text-align: right; font-family:Verdana, Arial, Helvetica, sans-serif;}
.text_reklama {position:absolute; top: 125px; left: 50px; width:430px; text-align: center; font-family:Verdana, Arial, Helvetica, sans-serif;}

#text_reklama2 {position:absolute; top: 165px; left: 0px; width:430px; text-align: center; font-family:Verdana, Arial, Helvetica, sans-serif;}
.line_reklam {position:absolute; top: 95px; left: 30px; width:430px; text-align: center; font-family:Verdana, Arial, Helvetica, sans-serif;}
.map_text1 {position:absolute; top: 6px; left: 165px; color: red; width:240px; text-align: center; font-family:Verdana, Arial, Helvetica, sans-serif;}
.map_text2 {position:absolute; top: 66px; left: 15px; color: #000; width:240px; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif;}
.ekip_text2 {position:absolute; font-style: italic; top: 263px; left: 15px; color: #000; width:130px; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif;}
.ekip_text3 {position:absolute; font-style: italic; top: 263px; left: 183px; color: #000; width:130px; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif;}
.ekip_text4 {position:absolute; font-style: italic; top: 263px; left: 348px; color: #000; width:160px; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif;}
.ekip_text5 {position:absolute; font-style: italic; top: 503px; left: 15px; color: #000; width:160px; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif;}
.ekip_text6 {position:absolute; font-style: italic; top: 503px; left: 183px; color: #000; width:160px; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif;}
.ekip_text7 {position:absolute; font-style: italic; top: 503px; left: 350px; color: #000; width:160px; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif;}
.map_text3 {position:absolute; top: 66px; left: 300px; color: #000;  text-align: right; font-family:Verdana, Arial, Helvetica, sans-serif;}
.map_text4 {position:absolute; top: 446px; left: 85px; color: #000;  text-align: center; font-family:Verdana, Arial, Helvetica, sans-serif;}
.map_text5 {position:absolute; top: 736px; left: 125px; color: #000;  text-align: center; font-family:Verdana, Arial, Helvetica, sans-serif;}

.text1_contacts {position:absolute; top: 30px; left: 280px; width:230px; font-weight:bold; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif;}
.text2_contacts {position:absolute; top: 195px; left: 285px; font-weight: bold; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 20px; color: #ccc;}    
.text10_contacts {position:absolute; top: 195px; left: 5px; font-weight: bold; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 20px; color: #ccc;}    
.text3_contacts {position:absolute; top: 225px; left: 285px; color:green; font-style:italic; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif;}
.text4_contacts {position:absolute; top: 240px; left: 282px; color:green; font-style:italic; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif;}
.text5_contacts {position:absolute; top: 255px; left: 282px; color:green; font-style:italic; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif;}
.text6_contacts {position:absolute; top: 270px; left: 282px; color:green; font-style:italic; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif;}
.text7_contacts {position:absolute; top: 284px; left: 282px; color:green; font-style:italic; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif;}
.text8_contacts {position:absolute; top: 297px; left: 282px; color:orange; font-style:italic; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif;}
.text9_contacts {position:absolute; top: 310px; left: 282px; color:red; font-style:italic; text-align: left; font-family:Verdana, Arial, Helvetica, sans-serif;}
.forma_contacts {position:absolute; top: 510px; left: 2px;}
.fldset1 {color: black;}

li{list-style: circle;}
#kutiika
{position: absolute; top: 410px; left: 242px;
width:530px;
height:570px;
overflow:scroll;
color: black;
}
 
От: CSS Image a:hover

Първо в такъв вид CSS-а е много труден за работа не знам как се справяш.
Второ по-добре щеше да е да дадеш самo частта с твоите линкове.
Трето ти сам си си отговори на въпроса - a:hover.

Код:
а.someclass {
   width:XXpx;
   height:XXpx;
   display:block;
   background: url(IMAGE_URL);
}
 
a.someclass:hover {
   background: url(HOVER_IMAGE_URL);
}
Ако искаш да си по-оптимизиран направи ги и двете изображения на на един файл и сменяй позицията
Това ти е единият вариант, другият е да ползваш JS.
 
От: CSS Image a:hover

Код:
а.ic_pic_3 {
   width:150px;
   height:50px;
   display:block;
   background: url('img/clic/ic_down_logo_logo.png');
}
 
a.ic_pic_3:hover {
   background: url('img/click/ic_down_logo_logo_hover.png');
}

Така ли трябва да е ?
 
От: CSS Image a:hover

Ами да това би трябвало да работи, но имай предвид, че втората картинка няма да се зареди със страницата ами при самия hover и ако е по-голяма като размер или потребителят е с бавна връзка има възможност да се забави. Затова най добре на един файл да са. За образоване търси в Гугъл "CSS Sprites"

Поздрави!
 
От: CSS Image a:hover

Друг вариант е някой джаваскрипт като http://www.pixastic.com/lib/,
но няма да работи в ИЕ8-.
За ИЕ9 не съм сигурен.
 
От: CSS Image a:hover

Готово, оправих се благодарение на biosynthesis, благодаря ти братле :)
 

Горе