Witam. Nie wiem jak zrobić takie menu jakie znajduje się na stronie codjumper.pl
Chodzi mi o to, że przycisk ma jakieś tło, które po najechaniu się zmienia, a na tym przycisku jest jakiś napis
Wiem w jaki sposób zrobić menu, w którym po najechaniu zmienia się obrazek, ale napis znajduje się na grafice (tekst nie jest napisany w html), przez co każdy inny odnośnik w menu ma inny obrazek i strona ładuje się dłużej…
Strasznie pogmatwałem, ale jeśli ktoś zrozumiał to z góry wielkie dzięki za pomoc
Warto się przyjrzeć małej modyfikacji - mamy jedną grafikę z dwoma/trzema tłami, a w hoverach itp modyfikujemy tylko background-position. W ten sposób tło załaduje nam się do cache od razu - inaczej po najechaniu kursorem trzeba poczekać na załadowanie tego tła.
OK dałem sobie rade . Umieściłem ten kod, który podał Crop z tym, że obrazek, który zrobiłem(150x30px) nie jest wyświetlony w całości tylko w takim rozmiarze, że obejmuje napis “Home”…
Nic nie dało… ;/ to a przed n_menu co oznacza bo nie bardzo rozumiem…?
W dniu25.06.2008, o godzinie23:24został dopisany post przez AdZiU
Dałem rade…
W ustawieniach Dreamweaver we właściwościach strony trzeba było ustawić Styl podkreślania na Nigdy nie podkreślaj
Mam jeszcze jedno pytanie: co zrobić aby obrazki z menu załadowały się już w trakcie ładowania strony internetowej, a nie w momencie najechania na nie kursorem?
Na temat background-position wszędzie piszą tylko o pozycjonowaniu tła… przejrzałem z 20 stron i na żadnej nie ma mowy o ładowaniu menu podczas wczytywania strony. ;/
Chodzi mi o to, że grafika (1.png) wczytuje się podczas ładowania strony, co jest oczywiste z tym, że obrazek, który pojawia się po najechaniu na przycisk myszką (2.png) nie wczytuje się razem ze stroną, tylko dopiero po najechaniu na niego kursorem co małą chwilę trwa i nie za ciekawie wygląda (zamiana z 1.png na 2.png).
Po wczytaniu TEJ strony najedź na któryś przycisk z menu i zobacz, że zamiana z podstawowego obrazka (1.png) na obrazek po najechaniu (2.png) chwilę trwa, bo 2.png musi się w tym momencie wczytać…
załaduj obrazki jako tło do np div’a o display:none; - raczej nie polecane.
.menu_home{
background:url(../images/menu/homef.png) top no-repeat;
}
.menu_home:hover{
background-position: 10px -66px;
}
Home
W drugim sposobie oby dwie części przycisku to jeden plik. Np u góry hover, na dole normalny stan. Po najechaniu myszką na obrazkek (którego wyświetlasz fragment dzięki width i height) tło przesuwa się o ile tam chcesz pikseli chowając jedną część, a odsłaniając drugą.