Przejdź do treści

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:

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="...":

📋 Zaznacz kod ▶ Edytuj na żywo

<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

Przycisk podświetlany

Klinięcie

Jak zrobić obrazkowe przyciski, które zmieniają wygląd po kliknięciu?

Zmiana wyglądu przycisku po kliknięciu:

📋 Zaznacz kod ▶ Edytuj na żywo

<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

Przycisk podświetlany

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:

📋 Zaznacz kod ▶ Edytuj na żywo

<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

Przycisk podświetlany

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:

📋 Zaznacz 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!

Komentarze #

  • GetUp
    GetUp

    03.03.2015 22:22
    Umieściłem kod na blogu (blogger) i mam problem. Zdjęcia nie ładują się od razu. Wyświetlają się białe kwadraty a dopiero po najechaniu uruchamia się efekt który chciałem osiągnąć. Co powinienem zrobić?
    Zobacz więcej

  • aaa1
    aaa1

    24.07.2014 19:52
    A jak to jest z pozostawieniem w pozycji podświetlenia po kliknięciu w odnośnik na danej stronie to nie może być nic trudnego... ( już dzisiaj dałem takie pytanie tutaj na forum tylko w innym dziale.. ) tylko może mało precyzyjnie się wyraziłem dlatego posłużę się przykładem chodzi mi konkretnie...
    Zobacz więcej

  • Luke
    Luke

    17.03.2013 19:59
    kmi: "jak to zapisać w html, żeby korzystał z pliku ze stylami z konkretnego serwera ?".
    Tak samo, jak na stronie internetowej. Nie polecam jednak takiego posunięcia, bo część klientów poczty (a może nawet większość) blokuje pobieranie zewnętrznych plików i wymaga do tego potwierdzenia...
    Zobacz więcej

  • kmi
    kmi

    17.03.2013 18:30
    podpowiedzcie jeszcze tylko - bo mój mail ogólnie zajmuje nie mało i zdecydowałem, że wszystkie pliki będę trzymał na serwerze ftp, a w treści maila po prostu wkleję zawartość indexu, w którym są odnośniki do plików z serwera. Jeżeli zdecyduję się wykorzystać CSS to czy mogę go też trzymać na...
    Zobacz więcej

  • Sobak
    Sobak

    15.03.2013 16:04
    Jest, moźesz uzyć JavaScriptu, ale nie ma żadnego rozsądnego argumentu który by za tym przemawiał. Za to CSS jest standardem, jest tu lepszy z kilku powodów, nie ma żadnego racjonalnego argumentu z kolei żeby go nie używać :)
    Zobacz więcej

  • kmi
    kmi

    15.03.2013 15:27
    czy mimo css i js jest jakiś sposób aby zatrzymać to wszystko w html ?
    Zobacz więcej

  • Luke
    Luke

    15.03.2013 13:24
    Sobak: "Sugeruję jednak uzycie CSS zamiast JS.".
    Czyli użyj :hover (CSS) zamiast onmouseover (JS).
    Zobacz więcej

  • Sobak
    Sobak

    15.03.2013 12:47
    Mail może być napisany w HTML o ile zadbasz o odpowiednie nagłówki przy wysyłaniu. Sugeruję jednak uzycie CSS zamiast JS.
    Zobacz więcej

  • kmi
    kmi

    15.03.2013 12:45
    A czy można formułę onmouseover wykorzystać w mailu ? Chce stworzyć maila w html, w którym będę miał kilka obrazków i po najechaniu na nie, chciałbym żeby się zmienił obrazek. Próbowałem coś takiego zrobić i tylko to mi nie chce hulać :/
    Zobacz więcej

  • gościu
    gościu

    08.03.2013 13:12
    Miałem problem z podświetleniem. Teraz wydaje się to proste. :D
    Zobacz więcej

Zobacz więcej komentarzy

Facebook