Johdatus ohjelmointiin

Sorakuilu

Event -harjoituksia, DOM-harjoitukset 3

Kohta A, Hymy päälle ja pois

Tee html-sivu JavaScripteineen, jossa on surullinen smiley. Se alkaa hymyillä, kun hiiri viedään sen päälle.

Kohta B, kuvan koon muunnos, uusi ikkuna

Tee html-sivu JavaScripteineen, jossa on pieni kuva. Kun kaksoisklikkaat pientä kuvaa, se avautuu isona uuteen ikkunaan. Ikkuna avautuu komennolla window.open, tarkemmat määritykset löydät helposti Googlella. Ikkunan koko määritetään erikseen ja sisällä olevan kuvan kokoon voi vaikuttaa antamalla sille tyylissä width.

Kohta C, piiloteksti

Tee piilotettu teksti, joka tulee näkyviin, kun pidät hiirtä painettuna alueen päällä (vihje: anna alueelle ja tekstille väri).


Seuraaviin kohtiin löydät helposti vihjeitä, esim:


Kohta D, pomppiva pallo

Tee sivu, jossa on pallo suorakaiteen sisällä. Kun viet hiiren pallon päälle, se pomppaa kaksi kertaa alas ja ylös takaisin.

Kohta E, auto ajaa kuvaruudun halki

Toteuta seuraava toiminto: auto, joka ajaa kuvaruudun poikki 3 sekunnissa kun autoa kaksoisklikataan.

Kohta F, kilpa-ajo

Piirrä div-elementtiin taustaksi kilpa-autorata (suora korkeus 200 - 300 px, leveys 500 - 800px, rata taustakuvana).

Sijoita siihen kaksi diviä, joissa on taustakuvana eriväriset autot vasempaan reunaan alekkain ja lipun sisältävä div ylös vasemmalla.

Lisää dokumkenttiin vielä yksi div, jossa kerrot kirjoittamalla voittajan.

Aloitustilanne on suurin piirtein seuraava:
tilanne

Vihje: itse radalle kannattaa antaa position:absolute ja muille elementeilla position:relative.

Kuin lippua klikataan, autot lähtevät ajamaan kilpaa (arvo Math.random-funktiolla animaation liikkumisnopeus tai etenemisen määrä joka kerta erikseen).

Kun autot ylittävät maalilinjan, sijoita tulosalueelle tieto siitä, kumpi ensiksi ylitti radan reunaviivan eli voitti.

Lopetustilanne on suurin piirtein seuraava:
lopputilanne