W jaki sposób zrobić zmianę obrazka po najechaniu myszą by nie przeładowywał się po najechaniu...?
Zwykły :hover umieszczony w ul,li daje efekt taki, że najadę myszką na obrazek X znika na chwile i pojawia się dopiero Y. Mam na myśli to, aby nie znikało nic niepotrzebne a od razu się zmieniał.


Dam przykład:
Aktualny: http://helion.pl (dolne menu poziome nad wtyczką facebooka)
Dążę do: http://demotywatory.pl (menu górne)

Sorry za takie przykłady, ale tylko to w glowie tak na szybko

Jeżeli widać przeładowanie obrazków, to najprawdopodobniej za dużo ważą. Tak jak pisałeś, zwykły hover i po problemie.

Ewentualnie spróbuj tak.

z dwóch obrazków (zwykly i hover) robisz jeden, np pod sobą je ustawiasz a potem pozycjonujesz za pomocą background-position.

ta technika o której wspomniał krzywy36 nazywa się CSS Sprite

możesz także zrobić to niemal tak jak masz na oddzielnych obrazkach i skożystać z techniki wcześniejszego wczytania obrazków zanim są potrzebne (image preload - można uzyskać także przy pomocy samego HTML'a + CSS bez JavaScript) - przykłady jak to można zrobić możesz znaleść np. na stronie http://perishablepress.com/press/2008/06/1...so-much-better/

przy czym zalecany jest CSS Sprite