Image Gallery JavaScriptin avulla Juha Konttinen 1

Aloita uusi site • Tavoitteena on tehdä kuvagalleriasta neljä kehitysversiota • Tee tämän vuoksi siten sisään uusi alikansio 1 • Tee kansioon 1 alikansio images • Lataa harjoituksessa tarvittavat kuvat kansioon images • Tee kansioon 1 uusi html5-tiedosto index.html Siten rakenne valmistelujen jälkeen Juha Konttinen2

-- 1. kehitysversio -- Määrittele tiedostoon Index.html seuraava html-rakenne: Juha Konttinen3

Lisää linkit kuviin, lisää samalla kuviin otsikot (title) Juha Konttinen4

Testaa tulos nyt selaimessa Viemällä hiiri linkin päälle, näkyviin tulee ko. kuvan title (kuvassa ”A Fireworks display”) Osoittamalla linkkiä hiirellä, Kuva aukeaa selainikkunaan. Kokeile toiminta omalla koneellasi kehitysversio on nyt valmis -- Juha Konttinen5

Monista nyt kansion 1 sisältö ja anna kopion nimeksi 2. HUOM! ALÄ päivitä linkkejä monistaessasi kansiota. Avaa sen jälkeen kansion 2 index.html ja tee seuraavat muutokset siihen kehitysversio (kuvat aukeamaan samaan ikkunaan) -- Juha Konttinen6

Tee javascriptejä varten kansion 2 alle uusi kansio scripts. Lisää nyt uusi javascript-tiedosto kansioon 2 ja tallenna se nimellä ”showPic.js” (katso kuva alla). Linkitä javascript-tiedosto html-tiedostoon index. Juha Konttinen7

html head body h1 ul li img Juha Konttinen8

Tiedoston index.html sisältö: Tiedoston showPic.js sisältö: Kun linkkiä klikataan hiirellä, kutsutaan JavaScript- funktiota showPic. Samalla funktiolle välitetään argumenttina koko li- elementin sisältö. Funktio showPic saa attribuuttina html-koodissa valitun li-elementin sisällön. Sisältö sijoitetaan funktion sisällä muuttujan whichpic arvoksi. Muuttujan source arvoksi sijoitetaan li-elementin attribuutin href arvo. Muuttujen placeholder arvoksi sijoitetaan html- tiedoston elementti, jonka nimenä (id) on ”placeholder”. Placeholder nimisen elementin attribuutin ”src” arvoksi sijoitetaan muuttujan source (href) arvo. Javascript-käsky ”return false ” estää linkin osoittamisen oletustoiminnan tapahtumisen (eli linkistä avautuvan kuvan latautumisen vertaa 1. kehitysversio) Juha Konttinen9

X X Kehitysversio on valmis – Testaa sivun toiminta selaimessa!

Monista nyt kansion 2 sisältö ja anna kopion nimeksi 3. HUOM! ALÄ päivitä linkkejä monistaessasi kansiota. Avaa sen jälkeen kansion 3 index.html ja tee seuraavat muutokset siihen kehitysversio (lisätään kuvan title kuvan alle) -- Juha Konttinen11

Juha Konttinen12 Lisää tiedostoon index.html kuvan alle seuraava kappale: Lisää tiedostoon showPic.js kolme uutta riviä:

Juha Konttinen13 Testaa sivun toiminta selaimessa

Juha Konttinen Kehitysvaihe (muotoillaan sivu CSS-sääntöjen avulla) – Muotoile sivu CSS-säännöillä alla näkyvän tavoitteen mukaiseksi.