Šiuolaikinių WWW puslapių tiesiog negalima įsivaizduoti be grafikos. Jei pasaulinio tinklo istorijos pradžioje grafika buvo naudojama tik iliustracijoms, tai dabar ji dažniausiai atlieka dekoratyvinį vaidmenį, papildydama tekstą arba pavaduodama jį. Ypač pirmuosiuose "Interneto" svetainių puslapiuose, kurių vienas iš tikslų yra pritraukti lankytojų dėmesį ir priversti juos panaršyti giliau, grafinės nuorodos sutinkamos bent jau ne rečiau už tekstines, o kai kuriuose puslapiuose jų visai nebėra.

Grafinės nuorodos - tai gražu ir šiuolaikiška (ypač jei puslapio dizaineris turi saiko jausmą), o dar didesnį efektą galima pasiekti, pasitelkiant nesidėtingą grafinių nuorodų animaciją. Turbūt visi matė šen bei ten paveikslėlius, kurie keičiasi, kai ant jų "užlipa" pelės rodyklė. Daug kas norėtų turėti ir savo WWW puslapyje panašių smagių dalykų. Tai visai nesudėtinga. Pasiskaityk šį straipsnelį ir - pasidaryk pats!

 

Grafika

Kiekvienam animuoto grafinio meniu punktui, t.y., kiekvienai būsimai nuorodai reikia paruošti po porą .GIF arba .JPG formato paveikslėlių. Vienas iš jų vaizduos "ramybės būsenoje" esantį "mygtuką", kitas - "aktyvų", kai ant jo "užlips" pelės žymeklis. Paprasčiausiu atveju vienas nuo kito šie paveiksliukai gali skirtis fono ar užrašo spalva. Tarkim, kad "normali" nuoroda - tai baltas užrašas žaliame fone, o "aktyvi" - geltonas raudoname. Sukurkime šias paveikslėlių poras bet kokiu grafiniu redaktoriumi (tam puikiai tinka ir praeitame NK numeryje aprašytasis "Paint Shop Pro"). Vienoje poroje esantys paveikslėliai turėtų būti tokio paties dydžio.

pirmyn11.jpg (1590 bytes) pirmyn1.jpg (1823 bytes)

Kiek daugiau triūso pareikalautų "pasispaudžiančio" užrašo gamyba. Šiuo atveju "normalios" grafinės nuorodos tekstas gali turėti šešėlį, "aktyvios" nuorodos tekstas paslenkamas pora taškų į dešinę ir žemyn bei paliekamas be šešėlio.

pirmyn33.jpg (1415 bytes) pirmyn3.jpg (1437 bytes)

 

"JavaScript" programavimas

Žemiau pateiktas WWW puslapio, turinčio nuorodas į kitus du svetainės puslapius, HTML tekstas.
 

<HTML>
<HEAD>
<META Http-Equiv="Content-Type" Content="text/html; charset=windows-1257">
<TITLE>Mano puslapis</TITLE>
<SCRIPT LANGUAGE="JavaScript">

<!--- slepiame "JavaScript" nuo senų naršyklių

if (document.images) {

// iš anksto parsisiunčiame visus paveikslėlius:

pirmyn1 = new Image(90,25);
pirmyn1.src = "pirmyn.gif";
pirmyn2 = new Image(90,25);
pirmyn2.src = "pirmyn_x.gif";

atgal1 = new Image(90,25);
atgal1.src = "atgal.gif";
atgal2 = new Image(90,25);
atgal2.src = "atgal_x.gif";
}

// "htmlName" vietoje parodome "image" paveikslėlį
function hiLite(htmlName,image) {
if (document.images) {
document.images[htmlName].src = eval(image + ".src")
}}

// "JavaScript" slėpimo pabaiga --->

</SCRIPT>
</HEAD>

<BODY BGCOLOR="#ffffff">

<A HREF="pirmyn.html"
onMouseOver="hiLite('pirmyn','pirmyn2')"
onMouseOut="hiLite('pirmyn','pirmyn1')">
<IMG NAME="pirmyn" SRC="pirmyn.gif" ALT="Tik pirmyn"
width=90 height=25 border=0></A><P>

<A HREF="atgal.html"
onMouseOver="hiLite('atgal','atgal2')"
onMouseOut="hiLite('atgal','atgal1')">
<IMG NAME="atgal" SRC="atgal.gif" ALT="Kelias atgal"
width=90 height=25 border=0></A>

</BODY>
</HTML>

Pavyzdyje panaudotas "JavaScript" kalbos komandas supranta tik "Microsoft Internet Explorer 4.0", "Netscape Navigator 3.0", "Opera 3.0" ar naujesnės naršyklės. Dėl šios priežasties pav. "IE 3" savininkams deja nepavyks pamatyti po pelės žymekliu besikeičiančių paveikslėlių. Jei naršyklė yra pakankamai nauja, instrukcijos po "if (document.images) {" yra. vykdomos, o priešingu atveju programėlė "nukenksminama", kad vartotojo negąsdintų pranešimai apie klaidas. Dar senesnės naršyklės, visiškai nesuprantančios "JavaScript" kalbos, jos ir nemato, kadangi joms visas "JavaScript" tekstas atribojamas nuo likusio HTML komentarų simboliais "<!---" ir "--->".

Toliau programa iš karto parsisiunčia visų (taip pat ir "aktyvių") nuorodų atvaizdus (GIF paveikslėlius). Kiekvienam jų suteikiamas vardas. Pav., "normaliai" ir "aktyvi" grafinė nuoroda į puslapį buvo pavadintos atitinkamai "pirmyn1" ir "pirmyn2". Po "new Image" skliausteliuose įrašomos paveikslėlio išmieros - plotis ir aukštis.

Žemiau aprašoma funkcija "hiLite", kuri tam tikroje tolesniame HTML tekste apibrėžtoje "htmlName" vietoje parodo paveikslėlį, kuriam suteiktas "image" vardas.

Tolesnio puslapio teksto "BODY" skirsnyje, Jums reikalingoje vietoje įterpiama nuoroda į kitus puslapius (HTML komanda "A HREF"), kurios viduje rasime paveikslėlį ("IMG"). Šiam paveikslėliui, teisingiau pasakius, jo užimamai vietai yra suteikiamas vardas, pav., "pirmyn". Greta esančios standartinės "JavaScript" procedūros "onMouseOver" ir "onMouseOut" mūsų aukščiau appibrėžtos "hiLite" funkcijos dėka į šią vietą automatiškai įterpia "aktyvų" nuorodos paveikslėlį (mūsų atveju - "pirmyn2") arba "normalų" ("pirmyn1") priklausomai nuo to, ar virš jo yra pelės rodyklė, ar jos nėra.

Štai ir viskas.

Jei tai atrodo sudėtinga, pabandykite persirašyti į ".htm" arba ".html" priesagą turintį tekstinį failą visą pateiktą puslapio tekstą tekstą ir kiek paeksperimentuoti, įterpti daugiau nuorodų.