Obrázky
Při putování světem internetu se můžeme setkat mnohdy s obrázky které se při přejetí myší změní, k tomuto je využíván JavaScript. Tento způsob už je hodně dlouho používán, ale za tu dlouhou dobu je čím dál populárnější a užívanější.
Tento způsob se provádí tak že se do stránky nahraje obrázek kde se potom pomocí JavaScriptu dá změnit adresa na jiný obrázek. Zde je to jako u formulářů a to tak že buď můžeme volat pomocí pořadových čísel nebo pomocí názvů v atributu NAME.
Všeobecný zápis se provádí pomocí document.images[cislo_obr/name].
Záměna dvou obrázku
Už víme jak obecně se dá k obrázkům přistupovat a teď by jsme si to měli ukázat prakticky. Pro začátek jsem si pro vás připravil jednoduchý přiklad záměnu dvou obrázků.
<script language="JavaScript" TYPE="text/javascript">
<!--
function svit() {
document.images[0].src="image/druhy.gif"; }
function nesvit() {
document.nesviti.src="image/prvni.gif"; }
// -->
</script>
<body>
<a href="" onMouseOver="svit();" onMouseOut="nesvit();">
<img src="image/prvni.gif" NAME="nesviti" BORDER=0 ALT=""></a>
</body>
Tento script dovede zaměnit dva obrázky. Pomocí funkce svit() a nesvit() se provádí pomocí document.images[cislo/name].src
provádí záměna adres obrázků a tyto funkce se vyvolají po přejetí myší tedy onMouseOver a nebo odjetí myší onMouseOut.
Záměna více obrázků
Takže vezmeme to pěkně po pořádku, dovedete si představit že v předchozím příkladě by jste měli zaměnit více obrázků. Tak to by jste museli mít hodně funkcí a navíc
se tyto obrázky teprve vyvolávají a při pomalejším připojení by jste museli na ně čekat. A proto si ukážeme příklad kde si nahrajeme obrázky do paměti prohlížeče a ukážeme si jak jednoduše
nahrát záměnu více obrázků.
<head>
<script language="JavaScript" TYPE="text/javascript">
<!--
obr1=new Image(); obr1.src="image/1.gif";
obr2=new Image(); obr2.src="image/2.gif";
obr3=new Image(); obr3.src="image/3.gif";
function zamen(nazev_obr,novy_obr) {
document.images[nazev_obr].src=novy_obr; }
// -->
</script>
</head>
<body>
<p>
<a href="" onMouseOver="zamen('obr1','image/1.gif');"
onMouseOut="zamen('obr1','image/0.gif');">
<img src="image/0.gif" border=0 name="obr1" alt="">
<a href="" onMouseOver="zamen('obr2','image/2.gif');"
onMouseOut="zamen('obr2','image/0.gif');">
<img src="image/0.gif" border=0 name="obr2" alt="">
<a href="" onMouseOver="zamen('obr3','image/3.gif');"
onMouseOut="zamen('obr3','image/0.gif');">
<img src="image/0.gif" border=0 name="obr3" alt="">
</p>
</body>
Takže začátkem si ukážeme nahrání obrázků do paměti prohlížeče a to tak že pomocí obr1=new Image(); obr1.src="image/1.gif";
a dále postupujeme stejně až budeme mít nahráné všechny obrázky. Potom si vytvoříme funkci zamen(nazev_obr,novy_obr), která nám bude zaměňovat
postupně obrázky. A tuto funkci použijeme dále v události onMouseOut nebo onMouseOver kde se postupně zobrazují obrázky.
|
