IntroductionIn denne artikkelen vil jeg vise deg hvordan du skal skrive kode for et bildegalleri. Et bilde galleriet er bare en samling av bilder. Vanligvis er disse bildene er små. Når du klikker på en du se en forstørret form av det.Du trenger grunnleggende kunnskaper i HTML, CSS, Javascript og DOM å forstå denne artikkelen. Merk: Hvis du ikke kan se koden, eller hvis du tror noe mangler i denne artikkelen (brutt link, bilde fraværende), bare kontakte meg på [email protected]. Det er, kontakt meg for den minste problemet du har om hva du reading.
Some CSS og Javascript PrinciplesOne bildet kan vises på samme nettside med mer enn ett bilde koder. Det som betyr noe for å vise et bestemt bilde er verdien (URL) til kildeattributtet. Du kan bruke Javascript (og DOM) for å endre denne verdien for en bildekode. Et bilde tag kan ha mange attributter og verdier. Hvis du bare endre verdien, av kilden egenskap av bildekode, vil bildet merkelappen viser endres. Imidlertid vil det nye bildet har samme CSS egenskaper (størrelse, for eksempel) som forrige image.ExampleThere er ulike design for et bildegalleri. Jeg vil bruke et enkelt eksempel her.
Etterpå kan du endre koden som passer din kommersielt prosjekt. I dette eksemplet er det fem små bilder i en web-side. Når du klikker på et lite bilde, vises forstørret skjema høyere opp på siden. De fem bilder er i en rad. LayoutWhenever elementer av nettsiden din er i form av et rutenett, rad eller kolonne, kan du bruke HTML Table element. Så for dette eksempelet, trenger du to tabeller. Den første høyere opp i web-side har én rad og tre celler. Den første celle kan ha en viss tekst. Den andre cellen har forstørret bildet, og den tredje cellen kan ha noen tekst.
Den andre tabellen har en rad, men med fem celler for de fem små bilder. Alle de små bildene er av samme størrelse. Det er bare ett stort bilde, som er det forstørrede bildet. Dette er HTML-koden for tabellelementer: Noe tekst kan gå here.Some tekst kan gå here.src = "img2.jpg" onclick = "større bilde (event)" Anmeldelser