Jak za pomocą CSS i xHTML utworzyć "zmieniający się" przycisk?
Jak zrobić efekt zmieniającego się obrazka po najechaniu myszką jedynie za pomocą xHTML i CSS? Dla tych, którzy nie bardzo wiedzą o co chodzi - zerknijcie na logo zaradnych. Żarówka po najechaniu nań myszką rozświetla się. Jest to właśnie ten efekt, który chcę osiągnąć w tej poradzie. Rozwiązanie to jest o tyle lepsze od stosowania zewnętrznych skryptów JavaScript, czy flasha, że działa tak samo na każdej przeglądarce, a poza tym nie jest tak czasochłonne. Jak zatem osiągnąć ten efekt?
- • Notatnik, bądź inny program do edycji plików HTML/CSS
Nowy plik HTML i CSS
Utwórz nowy plik HTML posiadający wszystkie wymagane nagłówki (doctype, html, head, body...), oraz nowy styl css. Zapisz je np. na pulpicie. Plik HTML nazwij index.html, a CSS styl.css.
Grafiki
W programie graficznym przygotuj swój przycisk, czy też inną grafikę, która ma być odnośnikiem. Po utworzeniu przycisku przygotuj grafikę, o tych samych rozmiarach (najlepiej), która będzie się pokazywała po najechaniu myszką na ten przycisk.
Gdy już to zrobisz, przekopiuj jedną grafikę do drugiej i utwórz coś w stylu dwóch grafik pod sobą. Identycznie, jak na zrzucie obok. Przycisk na górze będzie widoczny, jako domyślny, a ten na dole, jako przycisk po najechaniu na niego myszką.
Gotowa grafika
Przytnijmy teraz grafikę, usuwając przeźroczyste pole i zapiszmy go na pulpicie pod nazwą przycisk.png.
Deklaracje klas
Powróćmy do naszego stylu CSS. Dodajemy tam identyfikator a#przycisk, a#przycisk:visited, a#przycisk:active z tłem, którym jest nasz przycisk. Tutaj tło będzie wyświetlane w pozycji "top".
Niżej, tworzymy identyfikator a#przycisk:hover, z tymi samymi atrybutami, lecz ze zmienioną pozycją wyświetlania tła. W przeciwieństwie jednak do wcześniejszych deklaracji, tutaj nasze tło będzie miało pozycję "bottom".
Wszystko, jak na zrzucie.
Opisując kolejne wartości, co one oznaczają:
background - ustawia tło. Najpierw zadeklarowaliśmy, że chcemy wyświetlić plik "przycisk.png", jeśli nie będzie go na serwerze zostanie wyświetlone białe tlo. Obrazek ma się nie powtarzać, a jego pozycja wyświetlania to "top".
width - szerokość obrazka
height - wysokość obrazka
display (block) - wyrażę się dość potocznie - wymusza wyświetlenie obrazka.
Dla "hover" wszystko wygląda tak samo, z tą różnicą, że obrazek wyświetla się od dołu, a nie od góry.
Przed i po
Jaki jest efekt dokonanych czynności? Obrazek zaraz po załadowaniu się strony jest tym górnym, a po najechaniu na niego, zamienia się na ten, który znajdował się na dole.
Komentarze
Ostatnio zmieniony: 2013-04-14 15:44:48
Ostatnio zmieniony: 2013-02-26 11:18:21
Ostatnio zmieniony: 2010-07-20 17:19:49
Dodaj komentarz