JavaScript - Obrázky

JavaScriptem je možné vytvořit animaci nebo zaměňovat obrázky (rollover)

Přístup k obrázkům

Pomocí HTML můžete do dokumentu vložit obrázek prvkem img. Javascript přistupuje k obrázkům dvěmi vlastnostmi (podobně jako k formulářům). Buď pomocí pořadí obrázku na stránce document.images[0] nebo pokud použijemee u prvku img atribut name - document.obrazek. Druhá vlastnost je použitelnější.

Manipulace s obrázky - rollover

Velmi často se setkáte s obrázky, které se po najetí myši změní. Tento efekt lze vytvořit pomocí JavaScriptu:

<script>
function ct1(){
document.obrazek.src="ct1.jpg";
}
function ct2(){
document.obrazek.src="ct2.jpg";
}
</script>
</head>
<body>
<img src="ct1.jpg" onMouseOver="ct2()" 
onMouseOut="ct1()" name="obrazek">

Ukázka: Funkce ct2() změní obrázek (atribut src) pomocí vlastnosti document.obrazek.src="ct2.jpg" (obálka se otevře). Druhá funkce nastává po opuštění obrázku a mění obálku zpět na zavřenou.

Animace

Je založena na opakovaném střídání obrázků:

<script language="JavaScript" type="text/javascript">
obr = -1;
cas = 1000;
function animation(){
obrazky = ["a.gif","b.gif","c.gif"];
if (obr+1==obrazky.length) obr=0;
else obr++;
obrazek.src = obrazky[obr];
window.setTimeout('animation()',cas);
}
</script>
</head>
<body onLoad="animation()">
<img src="a.gif" name="obrazek">

Obrázky se plynule střídají (jejich adresy jsou zavedené v poli obrazky). Pomocí načasování window.setTimeout() se plynule střídají po 1 vteřině.

Další: Řetězce - Práce s textem
Grafika: Rollover efekt pomocí CSS
Základy: XHTML a obrázky obecně

Doporučuji

Pro své weby používám *Webhosting C4: 20 GB prostoru, PHP, MySQL, e-maily, subdomény za 1200 Kč (zdarma 2 GB navíc každý rok). Více WebhostingC4.cz.

Potřebujete poradit?