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