Zmiana obrazka(buttona) po najechaniu myszką.
Maneta Majster
05.06.2010
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- 05.06.2010
pseudoklasa hover dziedziczy z klasy nadrzednej deklaracje wiec wystarczy w niej zapodać tylko.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; }
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