Pomocou JavaScriptu je mozne stvarat velmi pekne veci s obrazkami. Na uvod si ukazeme priklad, v ktorom sa potom ako uzivatel stlaci tlacitko, zmeni obrazok na iny.
Zdrojovy tvar:
| <html> <body> <img src="uv.gif" name="zmena"> <form> <input type=button value="Zamen obrazok" onClick="document.images[0].src='sz.gif'"> </form> </body> </html> |
Nedavno boli v mode animovane gify, no v dnesnej dobe su to tzv. preklapace obrazkov. Uzivatel ukaze mysou na obrazok a nasledne dojde k zmene toho obrazku na iny. Pri pouziti tohto efektu je dolezite, aby uzivatel po ukazani mysou na obrazok necakal kym sa nahra druhy obrazok, a preto je potrebne si v skripte najprv obrazky nacitat do pamati do pomocnej premennej.
Zdrojovy tvar:
| <html> <body> <script language="JavaScript"> <!-- Ln=new Image(2,136); Ln.src="green.gif"; LnHi=new Image(2,136); LnHi.src="gold.gif"; function glow(x, y) { document.images[x].src=eval(y+'.src'); } // --> </script> <center> <img src="green.gif" width="136" height="2" name="ln1"><br> <a href="8k.html#pro" onmouseover="glow('ln1', 'LnHi'); glow('ln2', 'LnHi')" onmouseout="glow('ln1', 'Ln'); glow('ln2', 'Ln')"> <img src="uv.gif" border="0" width="134" height="16"></a><br> <img src="green.gif" width="136" height="2" name="ln2"><br> <a href="8k.html#pro" onmouseover="glow('ln2', 'LnHi'); glow('ln3', 'LnHi')" onmouseout="glow('ln2', 'Ln'); glow('ln3', 'Ln')"> <img src="sz.gif" border="0" width="135" height="17"></a><br> <img src="green.gif" width="136" height="2" name="ln3"><br> </center> </body> </html> |
Medzi dalsie zaujimave efekty mozno povazovat kombinaciu preklapania obrazkov s animovanym gifom. Po prejdeni mysou na obrazok sa zacne animovat. Princip je ten isty, rozdiel je v tom, ze druhy obrazok musi byt animovany gif.
Zdrojovy tvar:
| <HTML> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- NS = new Image(); NS.src = "t.gif"; NA = new Image(); NA.src = "t2.gif"; // --> </SCRIPT> <A HREF="#proa" onMouseOver="document.images['N'].src=NA.src;" onMouseOut="document.images['N'].src=NS.src;"> <IMG SRC="t.gif" NAME="N" BORDER="0"> </A> </BODY> </HTML> |