IntroductionIn Tässä artikkelissa aion näyttää, miten kirjoittaa koodin kuvagalleria. Kuvagalleria on vain kokoelma kuvia. Yleensä nämä kuvat ovat pieniä. Kun valitset yhden näet laajentuneen muoto it.You tarvitsevat perustiedot HTML, CSS, JavaScript ja DOM ymmärtää tämän artikkelin. Huomautus: Jos et näe koodia tai jos luulet jotain puuttuu tässä artikkelissa (rikki linkki, kuva poissa), vain yhteyttä minuun [email protected]. Eli minuun yhteyttä pienintäkään ongelmaa olet mitä olet reading.
Some CSS ja JavaScript PrinciplesOne kuva voidaan näyttää samalla sivun useamman kuin yhden kuvan tunnisteet. Mitkä asiat näyttämään tietyn kuvan on arvo (URL) lähdemäärite. Voit käyttää JavaScript (ja DOM) muuttaa arvoa kuvan tunnisteen. Kuva tag voi olla monia ominaisuuksia ja arvoja. Jos muutat vain arvoa, on lähdemäärite kuvan tunnisteen, kuva tag näyttävä muuttuu. Kuitenkin uusi kuva on sama CSS-ominaisuuksia (koko, esimerkiksi) kuin edellinen image.ExampleThere ovat erilaisia malleja kuvagalleria. Käytän yksinkertainen esimerkki tästä.
Jälkeenpäin voit muokata koodia sopivaksi kaupallinen hanke. Tässä esimerkissä on viisi pientä kuvien web-sivun. Kun klikkaat pientä kuvaa, sen suurennettuna näkyy ylempänä sivulla. Viisi kuvaa peräkkäin. LayoutWhenever elementtejä Web-sivun ovat muodossa verkkoon, rivin tai sarakkeen, voit käyttää HTML-taulukon elementti. Joten tässä esimerkissä, tarvitset kaksi pöytää. Ensimmäinen ylempänä verkkosivulla on yksi rivi ja kolme solua. Ensimmäinen solu voi olla tekstiä. Toinen solu on suurennettu kuva, ja kolmas solu voi olla jonkin verran tekstiä.
Toisessa taulukossa on yksi rivi mutta viisi solujen viisi pieniä kuvia. Kaikki pienet kuvat ovat samankokoisia. On vain yksi suuri kuva, joka on suurennettu kuva. Tämä on HTML-koodi taulukkoelementeille: Osa tekstistä voi mennä here.Some tekstiä voi mennä here.src = "img2.jpg" onclick = "suuremmaksi (tapahtuma)"