Enter.net  


"»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