[HTML][CSS] Hover, zmiana tła oraz obrazka wewnątrz. Opcje

[Giluś]

Hej, posiadam menu i chcę zrobić HOVER w nim..
Standardowo, czyli gdy nie jest najechany to nie ma w nim żadnego tła, tylko jest zwykły obrazek.., natomiast gdy chcę najechać na obrazek chcę, aby tło się zmieniło na inny kolor i dodatkowo aby ten obrazek również się zmienił..

Mój kod:

[HTML] pobierz, plaintext 
<ul>
	<li class="menus"><a class="menus" href="index.html"><img src="gfx/home.png" /></a></li>
	<li class="menus"><a class="menus" href="index.html">O Nas</a></li>
	<li class="menus"><a class="menus" href="index.html">Faq</a></li>
	<li class="menus"><a class="menus" href="index.html">Kontakt</a></li>
</ul>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
.menus {width: 99px; height: 71px; float: left;}
.menus:hover {background:yellow; }
[CSS] pobierz, plaintext 

I tym sposobem zmienia mi się bez problemu tło na kolor żółty, lecz chce jeszcze osiągnąć, aby ten obrazek zmieniał się na inny i dodatkowo jeszcze to tło zmieniało się na kolor żółty..

Coś takiego mam: http://jsfiddle.net/88BL3/

I chcę aby ten "Domek" zmieniał się dodatkowo na kolor czarny po najechaniu

Tutaj jest obrazek:
http://i.imgur.com/iRyyrEt.png





Dosyć dawno nie kodowałem i zapomniałem jak się to robi, może mi troszkę pomożecie ?


Pozdrawiam i z góry bardzo dziękuje za pomoc

[SmokAnalog]

Najlepiej by było, gdybyś ten domek znalazł w jakiejś czcionce, bo takie jednokolorowe obrazki aż się o to proszą. Ma to wiele korzyści, m.in. właśnie możliwość wyboru dowolnego koloru.

[Giluś]

Można tak zrobić, nie myślałem nawet o tym sposobie ..
Może znasz taką czcionkę ?

[SmokAnalog]

Zobacz tę: http://www.entypo.com/

Ma niemal identyczny domek

[Giluś]

Jednak w moim przypadku mi to nie pomogło, bo bardzo dużą czcionkę muszę ustawić aby był on o wymiarach 22x22 px.., wiec chyba pozostanę przy 1 sposobie.

Ma ktoś jakieś pomysły ?

[SmokAnalog]

No ale w czym problem? To opakuj go w <span> i nadaj duży rozmiar czcionki.

[Raito]

Ewentualnie możesz przygotować 2 grafiki, jedną ustawić jako tło, a potem zmienić je przy pomocy :hover.
Drugie rozwiązanie to danie dwóch zdjęć na siebie i po najechaniu górnemu dać opacity:0.

[trueblue]

Jeden obrazek, tam gdzie ma się zmieniać kolor, przezroczysty, pozostałe tło, jednolity kolor. Zmieniasz tylko background-color.