Pożyteczne drobiazgi


Przykład 8 - przyciski

IE, Netscape, Opera

Atrakcyjność naszej strony możemy jeszcze podnieść tworząc graficzne przyciski. Przygotujemy kod, który wyświetli w przeglądarce obrazy będące odnośnikami do innych stron. Będą one posiadały tę właściwość, że w momencie najechania kursorem na taką grafikę, zostanie ona zmieniona na inną, stwarzając wrażenie wciskania przycisku. Posłużymy się do tego obsługą zdarzeń i JavaScriptem, a całość zajmie nam zaledwie kilka linii. Zanim jednak rozpoczniemy tworzenie kodu, musimy przygotować odpowiednie pliki graficzne, w dowolnym obsługiwanym przez przeglądarki formacie.

Krok 1

Omawianie kodu celowo zaczniemy od środka. W linii 8 widać znacznik A umieszczający na stronie odnośnik do serwisu internetowego naszego magazynu (odnośnik ten będzie miał postać graficzną). Linie 9 i 10 zawierają atrybuty obsługi zdarzeń, które to właśnie pozwalają na podmianę grafiki. Linia 9 informuje przeglądarkę, że po najechaniu kursorem na grafikę w jego miejscu ma pojawić się inny obraz. Jaki, podajemy pomiędzy znakami cudzysłowu. Z kolei linia 10 sprawia, że gdy cofniemy myszkę z nad obrazu nastąpi kolejne podmiana obrazów. Tym razem nastąpi powrót do punktu wyjścia. Ciąg znaków document.images[0].src to nazwa obiektu, na którym dokonujemy operacji zamiany obrazów. W naszym przypadku jest to grafika, którą wprowadzamy w linii 11. Liczba zero w nawiasach kwadratowych informuje, że jest to pierwsza grafika, jaka została umieszczona w kodzie. Jeśli chcesz wstawić więcej przycisków, musisz powtórzyć linie 9 i 10, wstawiając w nawiasach kwadratowych odpowiednią liczbę, np. dla drugiego przycisku będzie to jedynka. Zwróć uwagę, czy wcześniej nie umieściłeś na stronie jakiejś grafiki, ponieważ zmieni to ich numerację. Wynika to z faktu przechowywania przez JavaScript grafik z danego dokumentu HTML w tablicy o nazwie images. Na koniec linia 11 - tradycyjny kod HTML, który umieszcza na stronie nasz przycisk graficzny, zanim nastąpią zdarzenia opisane w liniach 9 i 10.

Krok 2

Przykłady

Pobierz przykłady

Same funkcje obsługi zdarzeń nie dadzą satysfakcjonującego efektu - przeglądarka będzie pobierać z serwera drugą grafikę, co spowoduje opóźnienie w podmianie grafik Żeby tego uniknąć, należy załadować wszystkie pliki graficzne do pamięci podręcznej przeglądarki jeszcze w trakcie ładowania strony. Służą do tego linie 3 i 4. Linia 3 tworzy obiekt typu image, z kolei linia 4 przypisuje do niego wybrany przez nas pliku graficzny. Należy tu wpisać nazwę drugiego z pary plików tworzących nasz przycisk. Pierwszy zostanie załadowany wraz z kodem HTML. Takie postępowanie sprawi, że wszystkie potrzebne plik zostaną pobrane zawczasu i nie wystąpi wspomniany efekt opóźnienia.

1: <HEAD>

2: <SCRIPT>

3: przycisk = new Image();

4: przycisk.src = "przycisk2.gif"

5: </SCRIPT>

6: </HEAD>

7: <BODY>

8: <A href="http://www.pcworld.pl"

9: onMouseOver="document.images[0].src='przycisk2.gif';"

10: onMouseOut="document.images[0].src='przycisk1.gif';">

11: >IMG border="0" src="przycisk1.gif"></A>

12: </BODY>