Skocz do zawartości

  • Zaloguj korzystając z Facebooka Zaloguj korzystając z Twittera Zaloguj przez Steam Zaloguj poprzez Google      Logowanie »   
  • Rejestracja

Witamy w Nieoficjalnym polskim support'cie AMX Mod X

Witamy w Nieoficjalnym polskim support'cie AMX Mod X, jak w większości społeczności internetowych musisz się zarejestrować aby móc odpowiadać lub zakładać nowe tematy, ale nie bój się to jest prosty proces w którym wymagamy minimalnych informacji.
  • Rozpoczynaj nowe tematy i odpowiedaj na inne
  • Zapisz się do tematów i for, aby otrzymywać automatyczne uaktualnienia
  • Dodawaj wydarzenia do kalendarza społecznościowego
  • Stwórz swój własny profil i zdobywaj nowych znajomych
  • Zdobywaj nowe doświadczenia

Dołączona grafika Dołączona grafika

Guest Message by DevFuse
 

Zdjęcie
CSS

Zmiana obrazka(buttona) po najechaniu myszką.

CSS

  • Zamknięty Temat jest zamknięty
1 odpowiedź w tym temacie

#1 Maneta Majster

    Nowy

  • Użytkownik

Reputacja: 1
Nowy

  • Postów:7
  • Lokalizacja:Czaniec
Offline

Napisano 05.06.2010 12:23

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 :lol: )

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
  • +
  • -
  • 1

#2 -PainKiller-

    Wszechobecny

  • Zbanowany

Reputacja: 66
Pomocny

  • Postów:498
  • GG:
  • Steam:steam
  • Imię:Kamil
  • Lokalizacja:Kraków
Offline

Napisano 05.06.2010 13:52

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 :D 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





Również z jednym lub większą ilością słów kluczowych: CSS

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych