1 / 13

Image Gallery JavaScriptin avulla

Image Gallery JavaScriptin avulla. Juha Konttinen. 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

ina
Download Presentation

Image Gallery JavaScriptin avulla

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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äkyviin tulee ko. kuvan title (kuvassa ”A Fireworksdisplay”) Osoittamalla linkkiä hiirellä, Kuva aukeaa selainikkunaan. Kokeile toiminta omalla koneellasi. -- 1. kehitysversio on nyt valmis -- Juha Konttinen

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

  8. Tiedoston index.html 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. Muuttujenplaceholder arvoksi sijoitetaan html-tiedoston elementti, jonka nimenä (id) on ”placeholder”. Placeholder nimisen elementin attribuutin ”src” arvoksi sijoitetaan muuttujan source (href) arvo. Javascript-käsky ”returnfalse ” estää linkin osoittamisen oletustoiminnan tapahtumisen (eli linkistä avautuvan kuvan latautumisen vertaa 1. kehitysversio) Tiedoston showPic.js sisältö: Juha Konttinen

  9. -- 2. Kehitysversio on valmis – Testaa sivun toiminta selaimessa! X X Juha Konttinen

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

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

  12. Testaa sivun toiminta selaimessa Juha Konttinen

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

More Related