Animowane przyciski
Na wielu stronach w Internecie możesz spotkać aktywne przyciski. Po wskazaniu ich myszką, zmieniają swój wygląd, co sugeruje użytkownikowi, że kliknięcie wywoła jakąś akcję (najczęściej przeniesienie do innej strony). Wbrew pozorom wstawienie takich przycisków na własną stronę, wcale nie jest takie trudne.
Wymagana wiedza:
- Odsyłacze obrazkowe (podstawowe)
Aby wprowadzić na stronę zwykłe przyciski (nieaktywne), które nie zmieniają wyglądu, wystarczy skorzystać z odsyłaczy obrazkowych.
Podświetlenie
Jak zrobić obrazkowe przyciski, które podświetlają się po najechaniu myszką?
Aby wprowadzić na stronę przyciski obrazkowe, które zmieniają swój wygląd, po wskazaniu ich myszką, wystarczy dodać do znacznika <img> dwa dodatkowe atrybuty: onmouseover="..." i onmouseout="...":
<a href="adres"><img src="obrazek_podstawowy.gif" alt="Tekst alternatywny" border="0" onmouseover="this.src = 'obrazek_podswietlony.gif'" onmouseout="this.src = 'obrazek_podstawowy.gif'"></a>
Przykład
Klinięcie
Jak zrobić obrazkowe przyciski, które zmieniają wygląd po kliknięciu?
Zmiana wyglądu przycisku po kliknięciu:
<a href="adres"><img src="obrazek_podstawowy.gif" alt="Tekst alternatywny" border="0" onmousedown="this.src = 'obrazek_klikniety.gif'" onmouseup="this.src = 'obrazek_podstawowy.gif'"></a>
Przykład
Podświetlenie i klinięcie
Jak zrobić obrazkowe przyciski, które podświetlają się po najechaniu wyszką i zmieniają wygląd po kliknięciu?
Zmiana wyglądu przycisku po podświetleniu myszką oraz po kliknięciu:
<a href="adres"><img src="obrazek_podstawowy.gif" alt="Tekst alternatywny" border="0" onmouseover="this.src = 'obrazek_podswietlony.gif'" onmouseout="this.src = 'obrazek_podstawowy.gif'" onmousedown="this.src = 'obrazek_klikniety.gif'" onmouseup="this.src = 'obrazek_podstawowy.gif'"></a>
Przykład
Pamięć podręczna
Co zrobić, aby podświetlanie przycisków graficznych następowało bez niepotrzebnego opóźnienia?
Stosując bezpośrednio powyższe skrypty, można zauważyć pewien nieprzyjemny efekt: po pierwszym wskazaniu bądź kliknięciu aktywnego przycisku, trzeba nieco zaczekać, aż załaduje się obrazek, który ma zostać wyświetlony. Dzieje się tak dlatego, ponieważ dopóki nie zostanie wywołana akcja, przeglądarka nie wie jaki obrazek, dajmy na to po podświetleniu, ma zostać wyświetlony. Jednak po pierwszym użyciu przycisku, dodatkowa grafika zostanie wczytana i zapisana w pamięci podręcznej przeglądarki, czyli na dysku lokalnym użytkownika. Dlatego przy drugim użyciu aktywnego przycisku, nic już się nie doczytuje.
Istnieje możliwość wcześniejszego poinformowania przeglądarki o dodatkowych obrazkach aktywnych przycisków, dzięki czemu zostaną one jeszcze przed pierwszym użyciem zapisane w pamięci podręcznej, a więc już podczas ich użycia nie nastąpi żadna zwłoka wywołana doczytywaniem. Ma to sens tylko dla wariantów obrazków w stanie podświetlonym i klikniętym. Używanie tej medoty dla obrazków w stanie podstawowym nie ma żadnego celu, ponieważ każdy obrazek, który jest normalnie umieszczony w kodzie strony - tak jak właśnie wariant podstawowy przycisków - automatycznie zapisuje się w pamięci podręcznej.
Wstaw w kodzie nagłówkowym dokumentu (wewnątrz <head>...</head> następujący kod:
<script> new Image().src = 'obrazek_podswietlony.gif'; new Image().src = 'obrazek_klikniety.gif'; </script>
Należy tutaj umieścić ścieżki dostępu do wszystkich obrazków aktywnych przycisków w wariantach "podświetlony" i "kliknięty", które znajdują się gdziekolwiek na stronie - dla każdego obrazka jedna linia. Nie radzę jednak przesadzać z ilością oraz wagą takich grafik, ponieważ są one wczytywane na zapas, tzn. nawet jeśli użytkownik nigdy ich nie użyje, to i tak muszą się załadować, oczywiście wydłużając całkowity czas wczytywania strony!