Zmiana obrazka po najechaniu na niego myszką (menu)
anteeekg
2008-05-07 11:33
Witajcie forumowicze. Mam problem : nie wiem jak zrobić by po najechaniu myszką na obrazek zmieniał się on... chodzi o górne menu pod logo. Wiem że kod do tego menu to:
/* MENU TOP BELOW LOGO */ #menu2{float:left;font-size:1.08em;list-style:none;} #menu2 li{float:left;} #menu2 a{display:block;float:left;height:38px;padding:0 14px;border-right:1px solid
n:none;} #menu2 a:hover{background:url('img/nav.gif') left bottom;background-color:inherit;color:#fff;text-decoration:underline;} #menu2 .selected{background:url('img/nav.gif') left bottom;background-color:inherit;color:#fff;text-decoration:underline;}
GDZIE I CP WKLEIĆ BY DZIAŁAŁO ? Proszę o pomoc. Z góry dziękuje.
No więc wykorzystany jest tutaj powszechnie już znany mechanizm na używanie rolloverow (czyli obrazków zmieniających się po najechaniu na nie myszką). Niezbędne jest wcześniejsze przygotowanie sobie odpowiednio zmodyfikowanego obrazka. Do menu w podstawowej wersji wykorzystany jest taki: http://img396.imageshack.us/img396/5672/navai3.gif Trzeba tutaj zwrócić uwagę na to, że obrazek ten jest jakby powielony w pionie (tło w tym przypadku się powiela po osi x, ale to nie musi być w regułą, można użyć szerokich, całych obrazków, byle miały takie same wysokości i były właśnie w taki sposób ustawione jeden pod drugim). To bardzo ważna cecha, bo mając już tak utworzony plik teraz patrzymy na kod tego menu:
#menu2 a:hover{background:url('img/nav.gif') left bottom;background-color:inherit;color:#fff;text-decoration:underline;}
W podstawowej wersji linku mamy kod background:url('img/nav.gif') i trzeba tutaj zaznaczyć, że jeśli pozycja tła nie jest ustawiona to domyślnie przyjmuje top left. Natomiast w linku hover (zresztą i w selected czyli zaznaczonym) czyli takim, na który się najeżdża myszką mamy ('img/nav.gif') left bottom. No i w tym wszystkim chodzi o to, że jeśli na link nikt myszką nie najeżdża to bierze tą górną część obrazka (górną połowę) a jeśli najeżdża to tą dolną i w ten sposób powstaje efekt zmiany obrazka. Ktoś zapyta "a dlaczego nie dać zupełnie innego obrazka po najechaniu przecież to prostsze?" - Robi się tak dlatego, żeby przeglądarka nie musiała po najechaniu ładować nowego obrazka, bo zwłaszcza przy słabszych łączach wygląda to koszmarnie, efekt znikających obrazków, nie wiadomo co wtedy do końca się dzieje.
Mam nadzieję, że rozwiałem wszelkie wątpliwości. Pozdrawiam
mam problem z rollover-em pod IE Pod FF jest wszystko ok, podobnie jak pod Chromem i Operą. Żeby w menu poziomym (o mnie/ofert/cennik...) wyświetlić wszystkie potrzebne elementy muszę mieć w liście menu o 1 element więcej. Wyświetla na pasku menu n-1 elementów. Pod FF ten dodatkowy jest niewidoczny natomiast pod IE wchodzi atrybutami na body i traktuje treść strony jako a {..} Adres strony www.net-broker.pl/zadbanypies
ustawienia w css: #menu1{font-size:1.08em;list-style:none;padding:2px 150px 0px 20px;text-align:center;} #menu1 li{float:right;height:50px;padding:10px 20px 1px 10px;background:inherit;}
