1 odpowiedź w tym temacie

[Maneta Majster]

Witam. Chciałbym Wam przedstawić jak zrobić button, który po najechaniu myszą się zmienia na inny.
Co nam będzie potrzebne?
- Dwa obrazki buttona. Jeden przed najechaniem myszą, drugi po,
- Program do edycji plików html/css (na przykład...notatnik )

Zwykle buttony html przyjmują formę <input> i takim buttonem się zajmiemy.
Wchodzimy w nasz plik z kodem html.

Wklejamy tam odpowiedni kod(przykładowo buttonu logowania):

<input type="submit" name="Login" class="klasa_buttonu" value="" style="border: 0px;">

Jako klasa_buttonu możemy dać np. buttlogin

Teraz wchodzimy w plik .css i dopisujemy w nim linijkę:

.klasa_buttonu { background: url(link do obrazka przed zmianą) no-repeat; width: szerokośćpx; height: wysokośćpx;
position:relative; color: #000000; cursor: pointer; }
.klasa_buttonu:hover { background: url(link do obrazka przed zmianą) no-repeat; width: szerokośćpx; height: wysokośćpx;
position:relative; color: #000000; cursor: pointer; }

Przy czym klasa_buttonu musi mieć taką samą nazwę jak w kodzie html
Ważne: nazwa klasy musi być bez spacji

To juz wszystko. Teraz nasz button będzie zmieniał swój obrazek po najechaniu na niego myszą, a po "odjechaniu" wracał do pierwotnego stanu

[-PainKiller-]

rozwiazanie nie praktyczne, sprawia nieprofesjonalny efekt ładowania sie obrazka dopiero bo wywołaniu pseudoklasy "hover". O wiele lepszym i optymalnym rozwiązaniem jest posiadanie jednego obrazka i ustawianie buttonow czy linkow jako elementy blokowe na połowę jego wysokości przez co on wczytuje się cały a dla stanu bez akcji ustawiamy position top, dla akcji hover ustawiamy position bottom. Efekt ten sam bez czekania na załadowanie obrazka.

.klasa_buttonu { background: url(link do obrazka przed zmianą) no-repeat; width: szerokośćpx; height: wysokośćpx;
position:relative; color: #000000; cursor: pointer; }
.klasa_buttonu:hover { background: url(link do obrazka przed zmianą) no-repeat; width: szerokośćpx; height: wysokośćpx;
position:relative; color: #000000; cursor: pointer; }

pseudoklasa hover dziedziczy z klasy nadrzednej deklaracje wiec wystarczy w niej zapodać tylko

background: url(link do obrazka przed zmianą) no-repeat;

i relatywne pozycjonowanie też jest bez sensu

podam przyklad takiego zastosowania aby nie byc goloslownym np na allegro widzicie menu, ono tak naprawdę wczytywane jest całe dla wszystkich akcji przyciskow a dopiero gdy user je wywoluje sa wstawiane w odpowiedniej pozycji
http://static.allegr...menu-sprite.png