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:

 |