[ 20. December 1999]
- Martin_Nemecek
Reload obrßzku pomocou JavaScriptu
Dnes si ukß₧eme jemn· fintu v Javascrite, ktorß nßm pom⌠₧e reloadova¥ obrßzky na naÜej HTML strßnke. Jednß sa o jednoduch² efekt, ke∩ po nabehnutφ myÜou na obrßzok sa tento zmenφ na in².
Tento efekt sa s ob╛ubou vyu₧φva pri tlaΦφtkach, Φi₧e buttonoch a my si ukß₧eme ako na to.
UrΦite ste sa s tak²mi reloadovan²mi obrßzkami u₧ stretli. Hlavne v Φasoch ke∩ som eÜte iba zaΦφnal na internete, som si obΦas vÜimol ₧e na niektor²ch strßnkach ke∩ s myÜou prejdem na
nejak² obrßzok ihne∩ sa zmenφ jeho pozadie, alebo typ pφsma na in². Dlho som si lßmal hlavu nad t²m, ako sa to dß dosiahn·¥. NeskorÜie, ke∩ som sa zaΦal zaobera¥ bli₧Üie HTML a JavaScriptom, zistil som ak²m sp⌠sobom sa tßto zmena dß dosiahn·¥. K⌠li objektφvnosti treba doda¥ ₧e zmeny s·visiace s prechodom myÜi na stanoven² objekt je mo₧nΘ realizova¥ taktie₧ pomocou CSS, rsp. Kaskßdov²ch Üt²lov, ale jednß sa trochu o in· situßciu.
Prv² problΘm pri pou₧itφ Javascriptu nastßva v momente ke∩ potrebujeme zisti¥ typ a verziu klientovho browsera. Je to potrebnΘ pri oÜetrenφ mo₧n²ch ch²b, ktorΘ by sa mohli eventußlne vyskytn·¥ pri pou₧itφ starÜφch verziφ browserov.
var name=navigator.appName;
var ver=parseInt(navigator.appVersion);
A teraz ke∩ u₧ mßme nßzov a verziu browsera m⌠₧eme pod╛a nastavenia premennej browser vola¥ 1 alebo 0, pod╛a toho Φi chceme naΦφta¥ obrßzok alebo nie.
var browser=0; if (name=="Netscape" && ver>=3) browser=1;
else if (name=="Microsoft Internet Explorer" && ver>=4) browser=1;
V tele html dokumentu eÜte pridßme nasledovn· linku na ONMOUSEOVER a ONMOUSEOUT udalos¥. Samotn² efekt je mo₧nΘ dosiahn·¥ nasledovn²m volan²m liniek pomocou t²chto udalostφ.
<A HREF="1.html" ONMOUSEOVER="zmen_img('image1',1)"
ONMOUSEOUT="zmen_img('image1',0)"> <IMG SRC="mo1.gif" NAME="image1" BORDER=0
WIDTH=100 HEIGHT=100 ALT="Sun"> </A>
Nasledovn² k≤d nßm vykonßva dve funkcie: po prvΘ ak prejdeme myÜou na obrßzok IMG mo1.gif, v tomto momente je volanß funkcia zmen_img(), ktorß zabespeΦφ reload obrßzku "mo1.gif" na "mo2.gif" udalos¥ou Mouse-Over. Po druhΘ, ke∩ myÜou opustφme hranice obrßzku "mo2.gif", tento sa opΣ¥ reloaduje naspΣ¥ na "mo1.gif" udalos¥ou Mouse-Out. Tu je avizovanß funkcia:
function zmen_img(name,state) {
if (browser==1) {
if (state==1)
this.document[name].src="mo1.gif";
else if (state==0)
this.document[name].src="mo2.gif";
}
}
Funkcia najsk⌠r overφ ako je nastavenß premenß
browser.Ak je to 1,potom v tomto prφpade browser podporuje met≤du "image swapping" a teda m⌠₧e sa pokraΦova¥ volanφm parametra state. Ak je hodnota tohto 1 m⌠₧e by¥ volan² alternatφvny obrßzok, Φi₧e "mo2.gif". Inß hodnota tohto parametra nesp⌠sobφ ₧iadnu zmenu, Φi₧e zostßva nadalej naΦφtan² prv² obrßzok "mo1.gif".
To je asi vÜetko, m⌠₧ete sa pusti¥ do prßce a zatraktφvni¥ si naprφklad vaÜe menu.
|
|
|
Homepage
