Juha Konttinen 1

Image Gallery JavaScriptin avulla

Juha Konttinen

Juha Konttinen 2

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 Konttinen 3

-- 1. kehitysversio --

Määrittele tiedostoon Index.html seuraava html-rakenne:

Juha Konttinen 4

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

Juha Konttinen 5

Testaa tulos nyt selaimessa

Viemällä hiiri linkin päälle, näkyviintulee ko. kuvan title (kuvassa ”A Fireworks display”)

Osoittamalla linkkiä hiirellä,Kuva aukeaa selainikkunaan.Kokeile toiminta omalla koneellasi.

-- 1. kehitysversio on nyt valmis --

Juha Konttinen 6

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 seuraavatmuutokset siihen

-- 2. kehitysversio (kuvat aukeamaan samaan ikkunaan) --

Juha Konttinen 7

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 Konttinen 9

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 Konttinen 10

XX

-- 2. Kehitysversio on valmis –

Testaa sivun toiminta selaimessa!

Juha Konttinen 11

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 seuraavatmuutokset siihen

-- 3. kehitysversio (lisätään kuvan title kuvan alle) --

Juha Konttinen 12

Lisää tiedostoon index.html kuvan alle seuraava kappale:

Lisää tiedostoon showPic.js kolme uutta riviä:

Juha Konttinen 13

Testaa sivun toiminta selaimessa

Juha Konttinen 14

-- 4. Kehitysvaihe (muotoillaan sivu CSS-sääntöjen avulla) –

Muotoile sivu CSS-säännöillä alla näkyvän tavoitteen mukaiseksi.