Obrázky

Veľmi často oživujeme stránky meniacimi sa obrázkami. Ak chceme zmenu obrázkov naprogramovať vo chvíli, keď vykonáme nejakú akciu - napríklad nájazd myšou nad obrázok, použijeme Javascripty.

Jednoduchý spôsob zmeny obrázka	<html> <body bgcolor="white"> <p><a onMouseover="document.hodiny.src='h2.gif'" onMouseout="document.hodiny.src='h1.gif'"><img border="0" src="h1.gif" name="hodiny" width="85" height="75"></p></a> </body> </html>
Udalosť onMouseover spôsobí, že po nájazde myšou nad obrázok h1.gif, tento sa zmení na obrázok h2.gif, po presunutí myši z obrázka onMouseout sa opäť zmení na h1.gif. meno obrázka name="hodiny" objekt vyvolaný document.hodiny.src
Pre rýchlejšie spracovanie a dynamickejší efekt, najskôr natiahneme obrázky do prehliadača.	<html> <head> <script language="javascript"> if(document.images){ h1=new Image h2=new Image h1.src="h1.gif" h2.src="h2.gif" } else { h1="" h2="" document.hodiny="" } </script> </head> <body bgcolor="white"> <p><a onmouseover="document.hodiny.src=h2.src" onmouseout="document.hodiny.src=h1.src"><img border="0" src="h1.gif" name="hodiny" width="85" height="75"></p> </a></body> </html>
v skripte overíme, či prehliadač pozná objekt Image. V tom prípade priradíme premenným h1, h2 dva rôzne objekty typu obrázok a potom použijeme vlastnosť objektu src, ktorým určíme adresy príslušných obrázkov. Ak prehliadač nepozná objekt image, nastavíme tieto objekty ako prázdne. V tele stránky použijeme predchádzajúce udalosti.