Kuvien käyttö JavaScriptillä

JavaScriptin käytetyimpiä sovelluksia on graafisten sovellusten tekeminen. JavaScript on yksinkertainen kieli, joten suuriin graafisiin sovelluksiin se ei sovellu, esimerkiksi pelien nopeiden grafiikkojen ohjaukseen. Tietenkin pienimuotoisempia pelejä voidaan pienellä koodimäärällä luoda.

Animaatioita ja dynaamisia kuvia taas JavaScripti ohjaa hienosti ja nämä sovellukset on helppo tehdä. Kuvia voidaan laittaa tasoihin ja tämä mahdollistaa kuvien ja tekstien vapaamman asettelun. JavaScript-kielellä voidaan myös hallita html-dokumentin kuvia erilaisten toimintojen vaikutuksesta. Esimerkiksi, jos hiiren kohdistin tulee kuvan päälle, kuva voidaan vaihtaa toiseen kuvaan. Tällä tavalla voimme antaa vaikutelman aktiivisesta ja ei-aktiivisista painikkeista.

Animaatiot
Yksi dynaamisten kuvien tekoon käytetty tapa on tehdä GIF-animaatio. Ongelma näissä on ennalta määrätty esitysajoitus ja käyttäjä ei voi vaikuttaa kuvien esitysnopeuteen tai tapaan. Kuvat näkyvät kiintein väliajoin. Tämä on käytössä enimmäkseen mainonnassa, esimerkiksi mainosbannereissa.

JavaScript kielellä pääsee nopeasti alkuun dynaamisten ja interaktiivisten kuvien tuottamisessa. JavaScriptillä voi helposti ohjelmoida esimerkiksi epäsäännöllisesti tai säännöllisin ajoin vaihtuvat mainoskuvat tai hiiren liikkeisiin reagoivat kuvat.

Images-oliotaulukko
Tavallisesti kuva lisätään HTML-sivulle seuraavasti:

<IMG src="kuva.jpg" width=120 height=45>

Koodissa annetaan src-ominaisuudella tieto siitä, missä kuva sijaitsee. width ja height-attribuuteilla määritellään kuvan koko. Kuvalle voidaan määrätä myös muita ominaisuuksia kuten alt, joka kertoo millainen teksti tulee kuvan tilalle jos kuvaa ei voida jostain syystä näyttää. name-ominaisuudella kuva nimetään, joten siihen voidaan viitata vaikka JavaScript-ohjelmalla.

JavaScript-ohjelmalla voidaan viitata kuvaan usealla eri tavalla. Seuraavassa esimerkeissä kuva on dokumentin ensimmäinen ja nimetty name-ominaisuudella testi-nimellä.

document.images["testi"]
document.images[0]
document.menu

Seuraavalla ohjelmalauseella sijoitetaan uusi kuva aikaisemman tilalle. if-lause tarkistaa selaimen yhteensopivuuden.

if (document.images)
document.images["testi"].src = "kuva2.jpg";

Uuden kuva-olion voi luoda tekemällä uuden image-olion, jolle voi antaa ominaisuuksia kuten leveyden ja korkeuden. Koon määrittely nopeuttaa selaimen toimintaa. Kuvaolion src-ominaisuus sisältää kuvan URL-osoitteen. Muuttujaksi ladattu Image-olio latautuu välimuistiin, vaikka se ei sivulla näy vielä.




Tuplakuvan vaihto napeista
Tämän efektin avulla saamme kotisivuille hienon nappivalikon, joka kertoo käyttäjälle kuvan avulla mihin linkki on ohjattu. Samoin myös ohjausnapit muuttuvat kun hiiren osoittimen laittaa linkin päälle.

Jotta voit tehdä tämän ohjelman, pitää sinun luoda napit ja kolme kuvaa ensin. Tee kolme suurempaa kuvaa jotka vaihtuvat kun hiiren vie napin päälle (pic1 - pic3) Tee myös neljä linkkinappia. Kaksi nappia normaalina ja näistä kopiot jotka ovat ulkonäöltään aktiivisia nappeja. Eli kun hiiren laittaa linkin päälle (but1 tai but2) aktivoituu painetut napit (but1b ja but2b).

pic1-kuva on aktiivinen kun sivulle tullaan. Kuva pic2 aktivoituu kun hiiren laittaa ensimmäisen napin päälle. Kuva pic3 näkyy kun hiiren osoitin on napin-2 päälla.



Tehtävään sijoitettavat kuvat: