Príručka k JavaScriptu
8. kapitola

8.0 Zamena obrazkov

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>

8.1 Preklapanie obrazkov

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>

8.2 Preklapanie obrazkov s animaciou

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>

Predchadzajuca kapitola - Nasledujuca kapitola - Obsah