Pildid
Tekstis olevaid pilte saab javaskripti abil vahetada. Lehekülje
loomisel luuakse seal paiknevatest piltidest massiiv, nii et
document.images[0] tähistab esimest pilti, document.images[1] teist jne.
Klassil Image on mitu atribuuti. Mõnda neist (nagu kõrgus ja laius) saab
vaid lugeda, kuid parameetrit src, mis sisaldab pildi URLi, saab
vajadusel muuta. Niimoodi pilte vahetades saab luua illusiooni
liikumisest, samuti, nagu järgnevas näites näha, võib vahetada pilti siis,
kui temale hiirega peale minna. Hiire liikumisele on võimeline
reageerima viide , kui hiir satub viitele, näidatakse pilti
failist pilt2.gif, hiire väljumisel failist pilt1.gif. Pildi juurde on
border=0 kirjutatud seepärast, et et pildi ümber sinist ranti ei tekiks.
Kuna tegemist on viite alla kuuluva teksti osaga, siis tekiks tema ümber
muidu joon, et oleks näha, et sinna vajutades kuhugi jõuda saab. Kuna
siin näiteks ei soovi ma hiirega viitele vajutamisele lehekülge vahetada,
siis on viiteks pandud selle sama faili aadress ehk Pilt1.html.
Pildi muutmine
Pilte saab ka automaatselt vahetuma panna. Järgnevas dokumendis on
kaks pilti ning funktsioon vaheta vahetab nad omavahel. Muutuja olek
näitab kumba pidi pildid on ning igal korral muudetakse selle muutuja
väärtus. Käsklus window.setTimeout("vaheta()", 500); ütleb, et 500
millisekundi pärast kutsutakse välja meetod vaheta(). Siin juhul
tähendab see, et sama funktsioon palub objektil window ennast uuesti
poole sekundi pärast välja kutsuda ning tulemuseks on, et meetod
kutsub end pidevalt välja ning iga poole sekundi tagant vahetatakse
pildid.
Pildi muutmine
Tervitus! 
Kui pilte soovitakse järjest panna enam ehk näidatav kino on
pikem, sel juhul võib pildid massiivi paigutada ning massiivi
elementidena on neid kergem soovitud järjestuses kätte saada. Massiivi
elemendid võib kohe loomisel ette anda, sellisel juhul paigutatakse need
sinna üksteise järele, nii et esimese indeksiks saab 0. Järgnev programm
on nii koostatud, et korduvasse seeriasse piltide lisamiseks või
eemaldamiseks tuleb lihtsalt sobivad pildid massiivi alles jätta ning neid
seal siis järjekorras näidataksegi.
Muutuja nr hoiab eneses pildi numbrit, mida parajasti
näidatakse. Funktsiooni "edasi" iga väljakutsumise korral leitakse uus
näidatava pildi järjekorranumber ning seejärel kuvatakse vastav pilt
ekraanile.
document.pilt1.src=pildid[nr];
tulemusena määratakse pilt1-ks nimetatud pildi andmete lugemise
failiks massiivis pildid kohal nr leiduv failinimi. Esimestel kordadel, kui
vastav fail pole veel võrku pidi kohale loetud, võib pildi näitamine veidi
aega võtta, kuni andmed pärale jõuavad. Järgmise ringi puhul aga on
andmed juba kohalikus arvutis ning pildi näitamine ei tohiks kuigi palju
aega võtta.
Pildi järjekorranumbrit arvutatakse nii, et numbrit
suurendatakse iga sammu juures ühe võrra. Kui ollakse viimasest pildist
mööda läinud, siis alustatakse taas algusest, et pildist 0. Tingimuse
(++nr>=pildid.length) juures suurendatakse kõigepealt muutuja nr
väärtust ühe võrra ning alles siis hakatase väärtusi võrdlema. ++
muutuja ees tähendab, et väärtust suurendatakse enne, kui tema
väärtusega midagi peale hakatakse. Oleks ++ taga, sel juhul kõigepealt
kasutataks muutuja väärtust arvutustes ning alles pärast muu tegevuse
lõppu suurendatakse seda. Massiivi pikkus pildid.length näitab
elementide arvu selles. Kui praeguses näites on massiivis pildid neli
elementi, siis pildid.length väärtuseks on neli, olgugi, et esimese
elemendi järjekorranumber on null ning viimase oma kolm.
Käsklus setInterval('edasi();', 500); dokumendi laadimise
juures tähendab, et pärast lehe saabumist hakatakse alamprogrammi
"edasi" välja kutsuma iga viiesaja millisekundi tagant. Nõndamoodi
vahetubki iga natukese aja tagant pilt ning meile tundub, nagu meie
silme ees toimuks väikene etendus.
Piltide vahetamine
Piltide vahetamine
Ühe koha peal pilte vahetades saab oma silmade ette väiksese
filmilõigu. Veidi juhtkäske rakendades või juhuarve kasutades võib seda
filmilõiku ka veidi muuta, luues pildid mitmest võimalikust
liikumisharust ning neid mingi omale või arvutile teada oleva algoritmi
abil järjestades. Nii võib luua vaikselt hõõguvast lõkkest, mis iga
natukese, kuid ettearvamatu aja tagant korraks heledamaks lahvatab.
Samuti võib kujutada teel jalutajat, kellele augud, palgid ja muud
konarused mõne aja tagant ette satuvad ning kelle tee näib kogu aja
muutuvat. Veel mõtet edasi arendades võib tee tasapisi seda siledamaks
minna, kui kaugele kasutaja muude tegevustega, näiteks lehe peal
paiknevate ülesannete lahendamisega jõudnud on.
Lehe peal paiknevaid pilte võib mitu olla. Sel juhul muutub
vahetamine paindlikumaks, korraga saab muuta väiksemat ala, ilma
suuremal pinnal muutusi tegemata. Kui eelmises näites peab iga juhu
tarvis uus pilt olema, siis väikeste piltide puhul võib paari pilti
kombineerides juba soovitud tulemuse saada. Kõik mustvalged
kujutised on põhimõtteliselt võimalik ekraanile manada kahe pildi abil –
üks must ja teine valge. Ning kummagi suuruseks piisab ühest punktist,
pildile ette antavate laiuse ja kõrgusega saab neid lihtsalt sobivasse
suurusesse venitada. Samuti kui soovin kedagi või midagi ekraanil
liikuma panna, siis esimesel juhul peaks iga asukoha tarvis eri pilt
olema, mitme pildi puhul aga võib seda lihtsalt parajas kohas välja
näidata.
Alljärgnevas näites liigub roheline silm kollastest ristkülikutest
koosneva ringi peal. Jõudnud oma liikumisega ühte serva, põrkab ta
sealt tagasi. Programm on taas koostatud nii, et alguses paiknevate
parameetrite (pildifailide nimed, piltide laius, kõrgus, arv) järgi
määratuna toimib kogu ülejäänud osa nii, et soovitava andmete
muutmise puhul piisab muutusest vaid alguses, ka ülejäänud koodi
mõistmata peaks tulemus vastama kasutaja ootustele. Sarnaselt on
maailmas võrku üles pandud hulgaliselt näiteid, kust enesele lõike
kopeerides võib päris ilusaid ja kasulikke lehti kokku panna, ilma, et
programmeerimise poolest peaks oluliselt enam muret tundma kui
hoolitsema, et ühendatud lõigud omavahel hästi läbi saaksid ning
üksteisega tülli ei läheks.
Muutuja nr näitab teistest erineva pildi järjekorranumbrit. Iga
järgmise pildivahetuse juures muudetakse seda numbrit niipalju, kui
muutuja "samm" ette näeb. Nii on teisevärviline pilt igal korral uue
koha peal ning peakski tekkima illusioon liikumisest. Servast
tagasipöördumine on kirjutatud veidi pikemalt kui hädapärast tarvis
arvestades, et liikumine toimiks ka ühest suuremate sammude korral.
Enne iga joonistamist ja astumist kontrollitakse, et ega eraldi näidatava
pildi järjekorranumber servale liiga lähedale jõudnud pole. Kui selgub,
et järgneva astutava sammuga jõutaks lubatud piiridest välja, siis
keeratakse sammu suund selliseks, et astutaks servast eemale.
Absoluutväärtus on pööramisel arvesse võetud seetõttu, et pikemate
sammude, sammu pikkuse või asukoha mujalt määratava muutumise
puhul võib tekkida olukord, kus asukoht on juba enne suuna arvutamist
lubatud piiridest väljas, suund aga juba õigele poole keeratud. Kui tahta
veidi koodi lihtsustada, siis siin näiteks võiks absoluutväärtuse asendada
lihtsalt miinusmärgiga, ehk põrgates vastu serva keeratakse suund
vastupidiseks. Keerukamatel juhtudel võib aga selline lihtsustus maksta
kätte avastusega, et liikuja jääbki lubatu ning lubatava piiri peale
põrkama.
Igal korral enne uue asukoha välja arvutamist pannakse endise
erivärvilise pildi asemele tagasi tavapilt, et me ekraani peal paiknev
liikuja ikka üksikuks jääks ning soovimatult paljunema ei hakkaks.
Loodus tühja kohta ei salli ning kui jätaksime rohelise eelmise asukoha
peale kollase kasti joonistamata, siis jääks sinna paratamatult roheline
ning uude kohta tekiks ikkagi sinna määratud roheline.
Liikuva silmaga joon
Liikuva silmaga joon
Kui soovida korraga liikuma panna mitu täpikest, sellisel juhul
tuleks igaühe puhul meelde jätta asukoht, kus see parajasti paikneb,
enne uut joonistusringi asendada kõik kohad taustapiltidega ning
seejärel joonistada iga uus ruuduke temale määratud kohta. Kuhugile
pole kirjutatud, et pildid peavad asetsema ühes reas. Neid võib rahus
paigutada tabelisse või üksteise alla, kuid lihtsalt tuleb meeles pidada
või välja arvutada, millises kohas parajasti millise numbriga pilt asub.
Hiirevajutus pildile
Pildil enesel standardi järele hiirevajutamise peale reageerimise
võimalust pole. Küll aga lisaks selline vahend lehe paindlikkust ning
väikeste kavaluste abil saab sarnase olukorra lausa mitmel moel
korraldada. Kui pilt muuta viiteks, siis õnnestub selle kaudu nii avada
teisi lehti, kui muudki moodi kasutajat rõõmustada. Kaarti kasutades
pildi piirkonnad tundlikuks muutes võib lausa iga pildi piirkonna peale
oma tegevuse siduda.
Ankru juurde kuulvad lisaks enimkasutatud lehe avamise
võimalusele (href=... ) veel alamprogrammide käivitamise kohad nii
hiire sisenemise, hiire väljumise kui vajutuse tarvis, vastavalt siis
onMouseOver, onMouseOut ja onClick. Viimasel juhul kaasneb
harilikult ka viite avamine, kuid kui käskluse lõpul teatada "return
false;", siis jäetakse teisele lehele suundumine katki ning täidetakse
käsklused, mis vajutamise juurde kuuluvad. Nagu all näha, vahetatakse
kollane pilt hiirevajutuse puhul rohelise vastu.
Vajutamisel muutuv pilt
Järgnevalt veidi pikem näide, mida soovi korral annab
kasutada nii õpetava kaardi, hiirevajutusi nõudva mängu kui lihtsalt
rõõmsa ekraaniilustuse põhjana. Kollase tausta peal muutub pilt,
millesse siseneti roheliseks ning millele vajutati punaseks. Pildilt
lahkudes pannakse vana kollane taust taas tagasi. Kui siit tuttavaid
vajutuse püüdmisi edasi arendada, siis ei peaks kuigi raske olema kokku
panna mäng, kus kasutaja peab ümberpööratud kaartide seast sobivaid
paare otsima.
Alamprogramm varvivahetus paigutab etteantud rea ja veeruga
pildile kolmanda parameetrina ette antud failinimes paikneva sisu.
Praegu kasutatakse sama alamprogrammi nii hiirevajutuse kui
sisenemiste-väljumiste tarvis, kuid see on tehtud vaid lühiduse mõttes
ning ei pruugi muudes rakendustes sugugi nii olla. Jällegi on püütud
koodi muudetavad osad paigutada etteotsa ning osalt seetõttu on
tagumine pool võibolla suhteliselt lühikeseks ja kirjuks muutunud, kuid
loodetavasti on sellest mõningase mõtlemise tulemusena siiski võimalik
aru saada. Pilte kirjutatakse järjest ilma tühikuteta üksteise järgi, et nad
ekraanil moodustaksid ühtlase välja. Iga rea lõppu tuleb reavahetus, et
järgmised pildid taas rea algusest peale hakkaksid. Nii sündmuste
onClick, onMouseOver kui onMouseOut puhul kutsutakse välja
funktsioon varvivahetus, igal korral aga antakse sinna ette eri värv. Rea
ja veeru järgi arvutatakse tagasi pildi järjekorranumber ning sinna sisse
määratud värv pannaksegi. Read ja veerud algavad nullist, iga järgneva
rea puhul lisatakse numbrile ette rida*veergudearv, see tähendab, et kui
tegemist on näiteks pinnaga, kus viis pilti reas, siis esimese rea esimene
element oleks number 0, järgmise puhul aga juba viie võrra suurem (ehk
5). Kirjutatav rida
" onClick=\"return varvivahetus("+rida+", "+veerg+",
'"+pilt1+"');\""
oleks lahtiseletatult järgmine. Üldiselt paigutatakse jutumärkide vahele
välja kirjutatav tekst, kuid kui soovitakse teksti enese sees jutumärki
väljastada, tuleb see esitada kujul \" , kus langjoon jutumärgi ees
varjestab selle ning laseb rahumeeli tavalise jutumärgina lehele
trükkida. Üks konkreetne rida võiks sellisel puhul tulla näiteks
onClick="return varvivahetus(3, 2, 'punane.gif');"
Kuigi võib eraldajana kasutada nii ühe- (') kui kahekordseid (")
jutumärke, et pääsenud siin mitte langjoone kasutamisest, sest kui on
vaja eristada nii programmi poolt väljastatavaid käske, onClick-i puhul
käivitatavat funktsiooni ning failinime, mida kannab muutuja pilt1, siis
kolme sorti jutumärke lihtsalt javaskriptis pole.
Vajutamisel muutuv pilt
Hiirevajutuse koordinaadid
Nagu mitmed muud kujundusega seotud vahendid, nii ka hiire
asukoha määramine on seiluriti erinev. Kui soovitakse üheaegselt toime
tulla mitme brauseri keskkonnas, siis tuleb tähelepanu pöörata, millisel
juhul kuidas andmeid püüda. Järgnev näide töötab vaid Netscapes.
Kõigepealt öeldakse brauserile, milliste teadetega üldse tegelda
tuleb. Kui kasutaja vastavaid andmeid ei vaja, siis pole mõistlik ka
seiluri energiat nende püüdmisele raisata. Edasi määratakse
alamprogramm, mis vastavale sündmusele reageerimisega tegelema
peab. Netscapes on korraldatud nii, et alamprogrammile antakse
parameetrina objekt, kelle parameetrite kaudu saab teada sündmuse
toimumise asukoha.
Hiire koordinaadid
Head vajutamist!
Kui soovida mitme seiluriga hakkama saada, siis üheks
võimaluseks on kindlaks teha, millise brauseriga parajasti tegemist on.
Siin näites on reageerimise eeltingimuseks seatud Javascript1.2 toetus
ning edaspidi käitutakse Internet Exploreriga ühtviisi, ülejäänutega
teisiti. Objekti window.navigator parameeter userAgent näitab brauseri
tüüpi ning kui selles leidub MSIE, siis tõenäoliselt on tegemist
Microsofti soovide järgi tegutseva tootega. Seal saadakse andmed hiire
asukoha kohta objektist event ning sündmuste püüdmise registreerimist
pole vaja.
Hiire koordinaadid liikumisel
Head liigutamist!
Muusika
Lihtsalt loo saab mängima panna, kui öelda, millisest failist selle tarvis
andmed võtta. Ekraanile ilmub soovitud suuruses juhtpult, kus saab
soovitud hetkel lugu mängida või mängimist katkestada.
Lugu