+- 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ł: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Rollover - obrazkowe menu jako lista - Problem (/thread-rollover-obrazkowe-menu-jako-lista-problem)
Rollover - obrazkowe menu jako lista - Problem - ripi - 28-11-2012
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
RE: Rollover - obrazkowe menu jako lista - Problem - Engine - 28-11-2012
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
RE: Rollover - obrazkowe menu jako lista - Problem - ripi - 28-11-2012
(28-11-2012, 15:38)Engine napisał(a): 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
RE: Rollover - obrazkowe menu jako lista - Problem - Kartofelek - 28-11-2012
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>