IntroductionIn denne artikel vil jeg vise dig, hvordan man skriver kode til et billede galleri. Et billede galleri er blot en samling af billeder. Normalt disse billeder er små. Når du klikker på en du se en forstørret form for det.Du har brug for grundlæggende viden i HTML, CSS, JavaScript og DOM at forstå denne artikel. Bemærk: Hvis du ikke kan se koden, eller hvis du tror noget mangler i denne artikel (brudt link, billede fraværende), bare kontakte mig på [email protected]. Det vil sige, kontakt mig for det mindste problem, du har om, hvad du er reading.
Some CSS og JavaScript PrinciplesOne billede kan vises på den samme webside med mere end ét billede tags. Hvilke sager at vise et bestemt billede er værdien (URL) af attributten kilde. Du kan bruge javascript (og DOM) for at ændre denne værdi for et billede tag. Et billede tag kan have mange attributter og værdier. Hvis du ændrer kun værdien, af kilden attribut af billedet tag, vil billedet tag er at vise ændre sig. Dog vil det nye billede har de samme CSS egenskaber (størrelse, for eksempel) som den tidligere image.ExampleThere er forskellige designs til et billedgalleri.
Jeg vil bruge et simpelt eksempel her. Bagefter kan du ændre koden der passer til din kommercielt projekt. I dette eksempel er der fem små billeder på en webside. Når du klikker på et lille billede, dens udvidede form, vises højere oppe på siden. De fem billeder er i en række. LayoutWhenever elementerne i din webside er i form af et gitter, række eller kolonne, kan du bruge HTML Table elementet. Så for dette eksempel, du har brug for to tabeller. Den første højere oppe på websiden har én række og tre celler. Den første celle kan have noget tekst.
Den anden celle har det forstørrede billede, og den tredje celle kan have noget tekst. Den anden tabel har en række, men med fem celler for de fem små billeder. Alle de små billeder er af samme størrelse. Der er kun ét stort billede, som er det forstørrede billede. Dette er den HTML-kode til tabellen elementer: Nogle Teksten kan gå her.Nogle tekst kan gå here.src = "img2.
jpg" onclick = "forstørre (begivenhed)"