Natychmiastowe wczytanie obrazkow pseudoklasy :hover

Czy jest jakiś sposób aby obrazki pseudoklasy :hover zostały od razu wczytane po załadowaniu strony? Zauważyłem że one się wczytują dopiero gdy najadę myszą na np. przycisk z menu, czyli dopiero wtedy gdy przeglądarka ma mi je wyświetlić a jest to brzydkie bo zanim on się wczyta jest białe tło… (piszę o firefoxie)

do tej pory omijałem to tak że robilem jeden wiekszy obrazek z tłem i w normalnym stanie wyswietla góre a gdy jest wywolana pseudoklasa hover to ten sam obrazek przesuwa sie do gory o polowe swojej wysokosci ale jest juz wczytany i nie bedzie tego bialego tla.

teraz mam takie menu do zrobienia ze muszą to byc dwa obrazki i chce je jakos wczytac od razu po zaladowaniu a nie dopiero gdy user myszą najedzie, da radę?

Polecam zrobić małą sztuczkę. M.in. zrobić podwójny obrazek, że góra jest przed najechaniem a dół po najechaniu. Obsadź obrazek w diva. nadaj mu połowę wysokości obrazka w stylu css dodaj mu (divowvi)

overflow:hidden;

. potem w cssie obrazka najechanego zrób

margin-top:POŁOWA WYSOKOŚCI OBRAZKApx

i powinno być ok.

Początek zrób tak jak mówi WooQash ale później użyj background-position (oczywiście na jednej grafice możesz mieć wiele elementów). Dla pseudoklasy :hover, danego elementu, przesuwasz tło w odpowiednie miejsce.

dzieki za starania ale przeczytajcie dokladnie o co pytam, a co juz stosuję :expressionless:

Faktycznie nie zauważyłem że już o tym pisałeś.

Dzięki temu pozbędziesz się przeskoku przy dwóch grafikach.

Witam,

Mam analogiczny problem na mojej stronie. Zastosowałem dwa rozwiązania znalezione w internecie (w tym identyczne do tego jakie prezentuje mario) i niestety żadne z nich nie działa.

Adres strony to http://www.jabol.eu

Nie znam JS. Proszę o pomoc.

Zamiast

Image1.src = "images/home2.jpg"

napisz tak

Image1.src = "./wp-content/themes/LA/images/home2.jpg"

itd.