Podświetlenie przycisków na stronach internetowych jest zwykle zorganizowane za pomocą dwóch obrazów. Po najechaniu kursorem myszy na odpowiedni element dokumentu (link lub przycisk) generowane jest zdarzenie, które zgodnie z instrukcjami napisanymi w języku CSS skłania przeglądarkę do zmiany jednego obrazu na inny. Gdy kursor myszy zostanie odsunięty od przycisku, następuje odwrotna zamiana.
Niezbędny
Podstawowa znajomość języków HTML i CSS
Instrukcje
Krok 1
Istnieje kilka opcji wdrożenia takiego mechanizmu podświetlania. Dla każdego z nich możesz użyć tego samego kodu HTML, zmieniając tylko opis odpowiedniego stylu. Kod HTML przycisku może wyglądać tak: tekst na przycisku Oto identyfikator tego elementu strony (id = "btnA"), do którego zostanie dołączony opis stylu.
Krok 2
Aby zrealizować jedną z opcji należy przygotować dwa zdjęcia, z których jeden pokazuje przycisk w stanie nieaktywnym, a drugi z podświetleniem. Będą one używane jako obraz tła linku. Instrukcje CSS dla tego przycisku mogą wyglądać tak:
a # btnA, a # btnA: odwiedzone {
Blok wyświetlacza;
szerokość: 50px;
wysokość: 20px;
tło: url (btnA.gif) bez powtarzania;
granica: 0;
}
a # btnA: najedź {
tło: url (btnA_hover.gif) bez powtarzania;
granica: 0;
}
Tutaj w pierwszym bloku wskazane są wymiary obrazka przedstawiającego przycisk (szerokość: 50px; wysokość: 20px;). Musisz je zastąpić wymiarami swojego obrazu. Nazwy plików graficznych należy zmienić w ten sam sposób: btnA.
Krok 3
Jedną z alternatyw jest umieszczenie obu obrazów na jednym zdjęciu. Może znajdować się jeden nad drugim lub obok siebie. Będzie również używany jako tło dla linku. Ponieważ rozmiary przycisków są określone w opisie stylu przycisku, wszystko, co do nich nie pasuje, nie będzie widoczne. W takim przypadku instrukcje umieszczone w opisie CSS powinny po najechaniu kursorem myszy przewijać obraz tła tak, aby obszar z obrazem podświetlonego przycisku znalazł się w ramce. W przypadku tej opcji kod z poprzedniego kroku należy zmienić w następujący sposób:
a # btnA, a # btnA: odwiedzone {
Blok wyświetlacza;
szerokość: 50px;
wysokość: 20px;
tło: url (btnA.gif) bez powtarzania;
granica: 0;
}
a # btnA: najedź {
tło: url (btnA.gif) bez powtórzeń 21px;
granica: 0;
}
Zakłada się, że umieściłeś obrazy jeden nad drugim (podświetlone na dole) i zapisano je w pliku o nazwie btnA.gif. Wysokość przycisków to 20px, szerokość to 50px - trzeba te wartości zastąpić własnymi.
