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ě




* výhodný 2 GB webhosting, PHP, MySQL, e-maily, subdomény atd. za 1200 Kč ročně - Více zde...

Vyhledávání

K webhosting Nokia 1208 zdarma

  • Nokia 1208 Výhodná nabídka pro čtenáře Tvorba-webu.cz.

    Pokud si objednáte Webhosting C4, dostanete k němu mobilní telefon Nokia 1208 zdarma.

    Do objednávky je třeba vložit slevový kupón "mobil", jak postupovat při objednávce si můžete přečíst na webu WebhostingDoména.cz

Doporučujeme