+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [CSS]Brak płynnego przejścia tła przy wskazaniu myszka (/thread-css-brak-plynnego-przej%C5%9Bcia-tla-przy-wskazaniu-myszka)
[CSS]Brak płynnego przejścia tła przy wskazaniu myszka - neoh - 04-05-2010
Witam,
w menu, w każdym div-ie mam ustawione inne tło.
Lecz gdy najade myszką na jeden z tych div-ów (div:hover) drugie tło wczytuje się strasznie wolno (musze czekać ok 8s aż pobierze sie te tło) i nie widać ani pierwszego tła ani drugiego więc jest puste miejsce.
Następnie gdy tło "pobierze sie" wszystko działa ok.(Oczywiście jak wyczyszcze cache przeglądarki problem pojawia się na nowo)
Probowałem także użyć atrybutu dla obrazka - onmouseover, lecz efekt jest taki sam jak w css - div:hover.
Zatem pytanie. Czy jest jakiś sposób żeby "wymusić" pobranie tego drugiego tła do pamięci przeglądarki zanim użytkownik najedzie myszką na element div?
Namiary na strone: neohdesign.co.cc
Zwróćcie uwage na menu.
Dodam że tła które tak wolno się wczytują zajmują od 970 bajtów do 2.2 kb.
Z jednej strony jest to troche, lecz na mojej innej stronie gdzie tło zajmuje ok 600b wszystko jest ok O.o
Namiary na drugą strone: myskateboarding.co.cc
Z góry dzięki za odpowiedzi.
Dodam jeszcze że przerobiłem wszystkie drugie tła na format gif co daje wielkości plików z rzędu 169 bajtów do 403 bajtów.
Tła nawet nie chcą sie wczytać szybciej D:
Nawet wczytują się dłużej a do tego jeszcze g******a jakość która daje gif w porównaniu do png.
efekt: neohdesign.co.cc/index2.html
RE: [CSS]Brak płynnego przejścia tła przy wskazaniu myszka - ery - 05-05-2010
Można to rozwiązać w sposób, że obydwa stany przycisku zapisujesz w jednym pliku, jako przykład znany portal allegro:
http://static.allegrostatic.pl/site_images/1/0/layout/menu-sprite.png
dalej w pierwszym stanie i drugim dajesz odpowiednie wartości background-position: 0px 0px; - pamiętaj też menu musi mieć stałą wartość height.
A długie wczytywanie jest też po winie samego serwera.
RE: [CSS]Brak płynnego przejścia tła przy wskazaniu myszka - neoh - 09-05-2010
Dzięki za odpowiedź ;P
Wcześniej znalałem też to http://riddle.jogger.pl/2005/08/25/efekt-rollover-w-css/ dokładanie o to mi chodziło dzięki ;D
RE: [CSS]Brak płynnego przejścia tła przy wskazaniu myszka - Dombas - 15-05-2010
Ja to rozwiązałem w nieco inny sposób. Załadowałem obrazki w tle w trakcie ładowania samej strony przy użyciu JS. Tutaj jest podobny przykład:
http://www.staff.amu.edu.pl/~psi/informatyka/javascript/preload.html