Izrada jednostavnih Web prezentacija (6)

(* – stih iz pesme jednog zemunskog muzičara)

Kako postići efektne promene navigacionih dugmića kada se preko njih prelazi mišem

U prošlom broju smo objasnili kako se jednostavno prave navigacijski dugmići u Photoshopu, a sada ćemo se pozabaviti njihovom upotrebom. Izvesno ste primetili na brojnim sajtovima kako se takvi dugmići promene, ulegnu, zasvetle ili drugačije oboje kada se prođe mišem preko njih. Efekat se zove „hover”, a u programima za Web dizajn tipa FrontPage i Dreamweaver postiže se opcijom MouseOver. Pre nego što upotrebite ovu opciju, neophodno je izraditi obe varijante svakog navigacionog dugmeta ili natpisa. Efekat „udubljenja” se u Photoshopu pravi isto kao i „ispupčenje” samo se označi opcija „Down” umesto „Up”. Ne bi bilo loše pomeriti i natpis na „udubljenom” dugmetu za jedan ili dva piksela dole-desno, to će pospešiti iluziju utiskivanja.

Mudro je pre početka rada usvojiti određenu konvenciju za imenovanje ovih sličica, kako biste se lakše snalazili kada ih postavljate na Web stranicu. Recimo, dodavanjem sufiksa 'gore'/'dole' (ili 'up'/'dn') u imenu fajla – 'slike_up.jpg', 'mp3_dn.jpg' itd. Prirodno, sve ove sličice treba smestiti u jedan folder unutar osnovnog direktorijuma sajta.

Kad miševi kolo vode

Na Web stranici prvo naređamo sve „gornje” verzije dugmića onim redosledom kojim želimo da ih posetilac sajta vidi. Recimo da je to jedan ispod drugog (možda će biti zgodnije da se iza svake slike pritisne 'Shift'+'Enter' a ne samo 'Enter' kako bi se umanjio vertikalni razmak). Nebitno je da li se prvo linkuje svako dugme sa dokumentom ka kojem treba da vodi, pa se onda šminka i dorađuje „reljef”, ili će redosled biti obrnut. U svakom slučaju, treba označiti prvo od dugmadi tako da se oko njega iscrtaju ugaone tačke i potom izabrati opciju Dynamic HTML Effects iz Format menija (u FrontPageu), odnosno aktivirati paletu Behaviors preko menija Window (u Dreamweaveru).

Kako se upotreba opcije MouseOver razlikuje u ova dva programa, moraćemo da je objasnimo za svaki posebno. U FrontPageu će se aktivirati toolbar (koji se može pridružiti ostalima u vrhu ekrana ili se ostaviti da „pluta” negde sa strane). Iz prvog dropdown menija (Choose an event) izabere se opcija Mouse over, zatim se u drugom potraži Swap Picture. Preostaje još samo da se preko trećeg dropdown menija potraži alternativna slika koja će se prikazati kada miš pređe tog dela stranice. Prirodno, donja slika biće istih dimenzija kao i gornja – ako se niste sami pobrinuli za to, FrontPage će je po principu Prokrustove postelje prilagoditi raspoloživom prostoru.

U Dreamweaveru se nakon označavanja slike (i njenog obaveznog imenovanja unutar palete Properties), potraži dugme '+' u Behaviors paleti i unutar pozamašnog menija negde pri dnu opcija Swap Image. U novom meniju treba preko Browse potražiti alternativnu sliku i svakako imati uključene opcije Restore Images on MouseOut i Preload Images. Prva će obezbediti da gornja slika ponovo prekrije donju kada se miš skloni sa nje, a druga će se pobrinuti da se sve alternativne slike na stranici učitaju odmah na početku kada se stranica prikaže u browseru, i sačekaju svoj red da „izađu pred publiku”. Bez toga, svaka od donjih slika počela bi da se učitava tek kada miš prvi put pređe preko gornje parnice, pa bi efekat izostao, ili barem zaostao za onoliko vremena koliko je potrebno da se slika učita. A u situaciji kada se mišem prelazi preko svih dugmadi zaredom, takvo kašnjenje bilo bi nepodnošljivo i pokvarilo bi željeni utisak.

Šta je još moguće?

Dreamweaver nudi i mnoštvo drugih zanimljivih efekata koje svakako treba isprobati. Recimo, za on Mouse Over zgodno je upotrebiti i opciju Set Text of Status Bar. Njome se menja natpis u statusnoj liniji na dnu browsera, pa će umesto hiperlinka tu stajati tekst po izboru. Prirodno, kada se miš skloni sa dugmeta, na statusnu liniju vraća se default natpis. Ovaj efekat, zajedno sa prigodnim tekstom u takozvanom ToolTipu (podešava se opcijom Alt teksta unutar Propertiesa) začinjava celu stvar taman kako treba, daje joj dodatni šmek, a i omogućava pomoć pri navigaciji, ili prigodne reklamne udice (Klikni da vidiš Snežanu u kadi! (ili na kamili, već šta ko voli...)). Alternativni ToolTip tekst funkcioniše samo za slike, ali oni napredniji, koji vole da prčkaju po HTML-u, mogu da ga ubace i iznad bilo kog teksta upotrebom atributa Title="" unutar taga kojim je taj tekst ograđen (doduše, nema garancija da će se videti u svim browserima).

Na sličan način moguće je menjati i delove teksta iznad kojih se pređe mišem. U FrontPageu se označi tekst, izabere iz prvog dropdown menija opcija MouseOver, iz drugog opcija Formatting i potom se u trećem potraži Choose Font i unutar uobičajenog Font dijalog boksa promene atributi po želji. Čak se može menjati, odnosno dodavati border oko teksta, mada zbog širine paragrafa i Web stranice taj efekat retko lepo izgleda. Međutim, ne treba smetnuti s uma da su kompjuterski korisnici, a pogotovo Web surferi, naviknuti na jedan način razmišljanja koji otprilike glasi „sve što se promeni kada preko njega pređem mišem vodi dalje, znači tu treba kliknuti i otvoriće se novi dokument”. Ako postavite „hover” efekte na elementima strane čisto šarenila radi, zbunićete posetioca i gotovo sigurno ga oterati. Tako da se u slučaju tekstualnog „hovera” treba ograničiti samo na linkove, pa se u Front Pageu sličan efekat može ostvariti i selektovanjem opcije Enable hyperlink rollover effects unutar Background kartice Page Properties dijaloga. Unutar Rollover style opet će se ukazati dijaloški prozor Font sa uobičajenim opcijama.

Bez obzira kako lepo izgledali svi ovi efekti kada ih razgledate iz svog browsera i u lokalnoj verziji sajta na sopstvenom hard disku, ne treba zaboraviti nekoliko činjenica. Prvo, previše navigacijskih dugmića zajedno sa alternativnim verzijama možda će se predugo učitavati sa servera na posetiočev računar, pa će željeni efekat biti osakaćen ili će potpuno izostati. A drugo, opet se vraćamo na problem kompatibilnosti – različite verzije različitih browsera možda neće razumeti skriptove kojima se ovi efekti postižu, pa ih neće ni ispravno pokazati, u kom slučaju je ceo trud možda uzaludan.

Nenad VASOVIĆ