Rollover - obrazkowe menu jako lista - Problem

[ripi]

Witam serdecznie,

jestem początkującym webmasterem (na co wskazuje chociażby nazwa tego działu ) i oglądałem ostatnio kilka video tutoriali (Lynda.com itp) odnośnie tworzenia stron html z wykorzystaniem css tak aby strona była "łatwiejsza" do pozycjonowania.

W jednym z tutków pojawił się notyw robienia menu na liscie, każdy link jest oddzielnym <li> a w css definiujemy stany hover/active itd. dla tego danego li i to jak ma się w nich zachowywać... Wszystko wydało się logiczne i sensowne, aż do czasu. Po zrobieniu pierwszej strony - wszystko pięknie śmigało... Problem pojawił się podczas robienia drugiej strony (zupełnie innej)... Mianowicie przy tym CSS'owym rolloverze, obrazek na chwile znika - zanim pojawi się następny... przez to obrazki nie zmieniaja się płynnie i wszystko wygląda mało profesjonalnie.

Pierwsza strona miała dokładnie taki sam kod odnośnie tego "rollover menu" co druga - i tam wszystko działało... Siedzę nad tym od jakiegoś czasu, czytam artykuły w necie i prawdę mówiąc nie mam bladego pojęcia - co wpływa na to, że obrazki znikają na te kilka sekund podczas najechania... Jedyne rozsądne wytłumaczenie jakie przychodzi mi do głowy, to to, że druga strona jest znacznie bardziej rozbudowana i być może jest to spowodowane po prostu obciążeniem łącza / ilością ściąganych elementów ... Ale to chyba za prosta diagnoza.

adres mojej strony: http://warsawcoach.pl ... wystarczy najechać na menu i od razu wiadomo o co chodzi...

Będę bardzo wdzięczny za pomoc

[Engine]

Dobrze myślisz, drugi obrazek jest wczytany dopiero po najechaniu - stąd opóźnienie. Aby tego uniknąć można dać obydwa stany menu (normalny i hover) na jednym img a później w css za pomocą background-position przesuwasz obrazek.
---
edit: pomoc naukowa: http://webdesignerwall.com/tutorials/advanced-css-menu

[ripi]

Dobrze myślisz, drugi obrazek jest wczytany dopiero po najechaniu - stąd opóźnienie. Aby tego uniknąć można dać obydwa stany menu (normalny i hover) na jednym img a później w css za pomocą background-position przesuwasz obrazek.

Chodzi o parametry TOP i BOTTOM?

Dziwi mnie tylko to, że wcześniej to działało - dopiero na drugiej stronie powstal ten problem

[Kartofelek]

Kod:

<a href="" class="ir img">Obrazek sraczek</a>

<style type="text/css">
.img {
     background:url(obrazek.png); width:100px; height:20px;
}
.img:hover {
     background-position:0 -20px;
}

.ir {
     font: 0/0 a !important;
     text-shadow: none !important;
     color: transparent !important;
     border:0 !important;
     background-color:transparent !important;
     display:inline-block;
     background-repeat:no-repeat;
}
</style>