JavaScript - efekt Rollover

DZIAŁANIE:

|

Kod:

Ewentualne Objaśnienia:

Korzystając z poznanych już zdarzeń czyli najechane myszką na element (łącze) oraz "odjechanie" myszką stworzyliśmy prosty efekt rollover. Po najechaniu na obraz zmienia się on, po zjechaniu wraca do stanu przed najechaniem. Ale w tym przykładzie zmieniają się dwa obrazy - po najechaniu na obraz wilczurka zamienia się on na obrazek z rotwailerem, a obraz z rotwailerem na obraz z wilczurem. Zaznaczam tutaj, że mogliśmy zdarzenia onmouseover oraz onmouseout zamieścić w znaczniku IMG bez używania znacznika A jednak niektóre przeglądarki mogłyby mieć z tym problem, dlatego czasem lepiej zrobić to w przedstawiony sposób.

Jeśli mamy na stronie jakiś obrazek i mamy efekt Rollover zmieniający obraz na inny po nahechaniu, to problem możę być tak że podmieniane obrazy mogą być sporych rozmiarów itd. i wtedy czas między najechaniem na obraz a wyświetleniem nowego może się wydłużać co nie da za ciekawych efektów. Dlatego można już przy ładowaniu strony nasz obrazek, na który będziemy podmieniać ten ze strony załadować do bufora. W tym przykładzie przeglądarka ładuje nam od razu oba obrazy czyli z wilczurem oraz rotwailerem. Ale przypuśćmy, że tego drugiego obrazu nie ma - jest tylko obraz z wilczurem, który zmienia się na obraz z rotwailerem po najechaniu, więc wtedy w sekcji HEAD umieścilibyśmy taki oto kod, dzięki któremu załadujemy naszą graficzkę do bufora przeglądarki :

Dzięki temu obraz z rotwailerem zostanie wczytany do bufora, co pozwoli potem na bezproblemowe wyświetlanie efektu .