Image Gallery JavaScriptin avulla Juha Konttinen 1.

Esitys aiheesta: "Image Gallery JavaScriptin avulla Juha Konttinen 1."— Esityksen transkriptio:

1 Image Gallery JavaScriptin avulla Juha Konttinen 1

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 Konttinen2

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

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

5 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. -- 1. kehitysversio on nyt valmis -- Juha Konttinen5

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 seuraavat muutokset siihen -- 2. kehitysversio (kuvat aukeamaan samaan ikkunaan) -- Juha Konttinen6

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 Konttinen7

8 html head body h1 ul li img Juha Konttinen8

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 Konttinen9

10 X X 10 -- 2. Kehitysversio on valmis – Testaa sivun toiminta selaimessa!

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 seuraavat muutokset siihen -- 3. kehitysversio (lisätään kuvan title kuvan alle) -- Juha Konttinen11

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

13 Juha Konttinen13 Testaa sivun toiminta selaimessa

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