|
"»ywe" przyciski |
Dariusz Ha│as |
P rojektuj▒c w│asne strony WWW, czΩsto jeste╢my ograniczeni ╢rodkami wyrazu, gdy┐ rzadko kiedy internauci maj▒ dostΩp do serwera umo┐liwiaj▒cy im tworzenie i obs│ugΩ w│asnych skrypt≤w CGI, applet≤w Javy i innych element≤w zwiΩkszaj▒cych interaktywno╢µ w│asnej witryny webowej. WzglΩdy jakie kieruj▒ administratorami serwer≤w WWW s▒ oczywiste, chodzi o bezpiecze±stwo danych. Zbyt │atwy dostΩp do serwera m≤g│by spowodowaµ, ┐e np. nagle nasze strony zosta│y przez nieznan▒ nam osobΩ zmienione lub usuniΩte. Nie wspominaj▒c ju┐ o wszelkiego typu wirusach i tzw. koniach troja±skich. Dlatego te┐ ci, kt≤rzy korzystaj▒ z darmowych serwer≤w WWW s▒ w zasadzie ograniczeni do samego jΩzyka HTML oraz tego, co potrafi zinterpretowaµ przegl▒darka, czyli skrypt≤w napisanych w jΩzyku JavaScript. Tym razem rzecz bΩdzie dotyczy│a ma│ego, ale ciesz▒cego oko elementu na stronach WWW - graficznego przycisku. Przycisk na stronie jest po prostu zwyk│ym obrazkiem, kt≤rego klikniΩcie przenosi nas do innej strony lub innego fragmentu aktualnej strony. Zestaw tego typu przycisk≤w stanowi co╢ w rodzaju menu danej witryny. Dlaczego jednak nie mieliby╢my zmieniµ strony tak, ┐eby najechanie myszk▒ na przycisk zmienia│o jego wygl▒d? Ma│a rzecz, a cieszy. Zanim zabierzemy siΩ do pisania skryptu realizuj▒cego takie dzia│anie konieczne jest przede wszystkim stworzenie przycisk≤w. Ja w swojej przyk│adowej stronie stworzy│em menu zawieraj▒ce nastΩpuj▒ce pozycje: nowo╢ci, archiwum, odsy│acze, produkty, pliki. Dla ka┐dej pozycji menu utworzy│em dwa pliki graficzne. Jeden reprezentuje stan normalny, tzn. tak▒ postaµ przycisku, jak▒ widaµ po za│adowaniu siΩ strony do przegl▒darki. Drugi natomiast odzwierciedla wygl▒d przycisku po znalezieniu siΩ nad nim kursora myszki. Gdy mamy ju┐ przygotowane pliki graficzne, mo┐emy przej╢µ do pisania skryptu. Jako ┐e kod JavaScriptu znajduje siΩ wewn▒trz kodu HTML danej strony, musimy wiΩc utworzyµ te┐ dokument HTML (lub u┐yµ ju┐ istniej▒cego). Skrypt JavaScript rozpoczyna siΩ od sekwencji <SCRIPT LANGUAGE="JavaScript"> kt≤ra wskazuje przegl▒darce, ┐e teraz powinna interpretowaµ JavaScript. Istotnym elementem w samym skrypcie s▒ komentarze. S▒ one poprzedzone dwoma uko╢nikami (tzw. slash) i poprawiaj▒ czytelno╢µ skryptu. Kolejnym krokiem jest definicja zmiennych. W moim przyk│adzie wygl▒da to nastΩpuj▒co:
var nowosciStat = 0 var archiwumStat = 0 var odsylaczeStat = 0 var produktyStat = 0 var plikiStat = 0 var kontaktStat =0 Po deklaracji zmiennych nastΩpuje konstrukcja warunkowa uzale┐niaj▒ca wykonanie znajduj▒cych siΩ w skrypcie instrukcji od tego, czy dokument zawiera obrazki.
if (document.images) { var Nnowosci = new Image(); Nnowosci.src = "images/nowosci.jpg"; var Anowosci = new Image(); Anowosci.src = "images/nowosci _aktywny.jpg"; } Za zachowanie siΩ przycisku na stronie odpowiedzialne s▒ w skrypcie dwie funkcje, jedna uaktywnia przycisk, za╢ druga przywraca stan normalny. Poni┐ej przyk│ad funkcji aktywuj▒cej przycisk:
// Funkcja uaktywniajaca function Act(imgName) {var TempStat=eval(imgName+'Stat'); //alert (TempStat); if (document.images) //&& (TempStat != 1)) { document.images[imgName].src = eval('A' + imgName + '.src'); } } Aby zdefiniowane w skrypcie funkcje zadzia│a│y, konieczne jest wprowadzenie do dokumentu HTML odpowiednich dyrektyw wskazuj▒cych przegl▒darce, kt≤r▒ funkcjΩ skryptu ma wykonaµ. Oto przyk│ad kodu HTML dotycz▒cego przycisku-odno╢nika kieruj▒cego nas do przyk│adowej strony z plikami:
<A HREF="pliki.html" ONMOUSEOVER="Act('pliki')" ONMOUSEOUT="DeAct('pliki')"> <IMG SRC="images/pliki.jpg" BORDER="0" NAME="pliki" ALT="Baza plik≤w"></A> Pe│ny kod skryptu znajduje siΩ na naszym kr▒┐ku w przyk│adowym dokumencie JAVASCRIPT\index.html. Aby dostosowaµ ≤w skrypt do w│asnych zastosowa±, wystarczy zamieniµ ╢cie┐ki dostΩpu do plik≤w graficznych oraz ich nazwy na odpowiadaj▒ce stworzonym przez nas. (c) Copyright LUPUS |