Zmieniające się przyciski

Efekt zmieniającego się przycisku, nastepujący w chwili, gdy kursor myszy znajdzie się nad tym przyciskiem stał się już pewnym standardem. W rzeczywstości polega on na tym, że w chwili "najechania" kursorem nad przycisk, w miejsce dotychczasowego obrazka przycisku podstawiany jest inny obrazek. Chwila pojawienia się kursora myszy nad obrazkiem jest, w rozumieniu języka JavaScript, zdarzeniem o nazwie 'OnMouseOver'. Analogicznie, chwila w której mysz opuszcza obszar obrazka jest zdarzeniem 'OnMouseOut'. Pozostaje więc stworzyć skrypt, który w odpowiedzi na wymienione wyżej zdarzenia dokona podmiany jednej wersji obrazka na drugą i odwrotnie.
Przystępujemy więc do dzieła. Cały skrypt umieścimy w nagłówku strony wpisując:


Tym sposobem, w nagłówku dokumentu umieścilismy skrypt, który będzie podmieniał obrazki. Pozostaje jeszcze uruchomić zdefiniwaną w nim funkcję w przypadku zajścia jednego z dwóch zdarzeń dla obiektu ANCHOR (czyli dla obrazkowego linku). Ta część, umieszczona w sekcji BODY, będzie uruchamiać nasza funkcję z odpowiednimi argumentami.
Rozmieszczamy więc "obrazkowe linki" (które w tym przypadku wiodą donikąd) w treści naszego dokumentu (w moim przykładzie tylko dwa):
OnMouseOver="mouseAction(1,'on');"
OnMouseOut="mouseAction(1,'out');">
WIDTH=120 HEIGHT=24 ALT="Rys1" BORDER="0">
OnMouseOver="mouseAction(2,'on');"
OnMouseOut="mouseAction(2,'out');">
WIDTH=120 HEIGHT=24 ALT="Rys2" BORDER="0">

Po załadowaniu strony w określonych miejscach wyswietlają się te obrazki, które powinny być wyświetlane w przypadku pozostawania kursora myszy poza nimi. W chwili ustawienia kursora na jednym z odnośników (zdarzenie 'OnMouseOver') uruchomiona zostanie funkcja 'mouseAction()' z parametrami odpowiednimi dla danego obrazka. Jeżeli zdarzenie to nastąpi dla obrazka, którego NAME='img1', funkcję zapiszemy nastepująco: "mouseAction(1,'on')". Dla obrazka z NAME='img2' do zdarzenia podstawimy "mouseAction(2,'on')".
W chwili, w której mysz opuszcza obszar obrazka (zdarzenie 'OnMouseOut'), musimy przypisać mu akcję w postaci "mouseAction(1,'out')" dla pierwszego obrazka oraz "mouseAction(2,'out')" dla drugiego. Obsługa zdarzenia 'OnMouseOut' powoduje przywrócenie pierwotnej wersji przycisku.
Oczywiste jest, że rozszerzając tablice 'arr_on' i 'arr_out' o kolejne pozycje możemy zarządzać dowolną ilością przycisków. Przystosowanie powyższego skryptu do każdej sytuacji polega na zmianie zmiennej 'rdzen', zmiennej 'elem_menu' i nadania plikom graficznym nazw według określonego klucza.