Image Gallery JavaScriptin avulla
description
Transcript of Image Gallery JavaScriptin avulla
![Page 1: Image Gallery JavaScriptin avulla](https://reader036.fdocument.pub/reader036/viewer/2022062315/568163b9550346895dd4cf6f/html5/thumbnails/1.jpg)
Juha Konttinen 1
Image Gallery JavaScriptin avulla
Juha Konttinen
![Page 2: Image Gallery JavaScriptin avulla](https://reader036.fdocument.pub/reader036/viewer/2022062315/568163b9550346895dd4cf6f/html5/thumbnails/2.jpg)
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
![Page 3: Image Gallery JavaScriptin avulla](https://reader036.fdocument.pub/reader036/viewer/2022062315/568163b9550346895dd4cf6f/html5/thumbnails/3.jpg)
Juha Konttinen 3
-- 1. kehitysversio --
Määrittele tiedostoon Index.html seuraava html-rakenne:
![Page 4: Image Gallery JavaScriptin avulla](https://reader036.fdocument.pub/reader036/viewer/2022062315/568163b9550346895dd4cf6f/html5/thumbnails/4.jpg)
Juha Konttinen 4
Lisää linkit kuviin, lisää samalla kuviin otsikot (title)
![Page 5: Image Gallery JavaScriptin avulla](https://reader036.fdocument.pub/reader036/viewer/2022062315/568163b9550346895dd4cf6f/html5/thumbnails/5.jpg)
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 --
![Page 6: Image Gallery JavaScriptin avulla](https://reader036.fdocument.pub/reader036/viewer/2022062315/568163b9550346895dd4cf6f/html5/thumbnails/6.jpg)
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) --
![Page 7: Image Gallery JavaScriptin avulla](https://reader036.fdocument.pub/reader036/viewer/2022062315/568163b9550346895dd4cf6f/html5/thumbnails/7.jpg)
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.
![Page 8: Image Gallery JavaScriptin avulla](https://reader036.fdocument.pub/reader036/viewer/2022062315/568163b9550346895dd4cf6f/html5/thumbnails/8.jpg)
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)
![Page 9: Image Gallery JavaScriptin avulla](https://reader036.fdocument.pub/reader036/viewer/2022062315/568163b9550346895dd4cf6f/html5/thumbnails/9.jpg)
Juha Konttinen 10
XX
-- 2. Kehitysversio on valmis –
Testaa sivun toiminta selaimessa!
![Page 10: Image Gallery JavaScriptin avulla](https://reader036.fdocument.pub/reader036/viewer/2022062315/568163b9550346895dd4cf6f/html5/thumbnails/10.jpg)
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) --
![Page 11: Image Gallery JavaScriptin avulla](https://reader036.fdocument.pub/reader036/viewer/2022062315/568163b9550346895dd4cf6f/html5/thumbnails/11.jpg)
Juha Konttinen 12
Lisää tiedostoon index.html kuvan alle seuraava kappale:
Lisää tiedostoon showPic.js kolme uutta riviä:
![Page 12: Image Gallery JavaScriptin avulla](https://reader036.fdocument.pub/reader036/viewer/2022062315/568163b9550346895dd4cf6f/html5/thumbnails/12.jpg)
Juha Konttinen 13
Testaa sivun toiminta selaimessa
![Page 13: Image Gallery JavaScriptin avulla](https://reader036.fdocument.pub/reader036/viewer/2022062315/568163b9550346895dd4cf6f/html5/thumbnails/13.jpg)
Juha Konttinen 14
-- 4. Kehitysvaihe (muotoillaan sivu CSS-sääntöjen avulla) –
Muotoile sivu CSS-säännöillä alla näkyvän tavoitteen mukaiseksi.