[ 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.
|
|
|