IntroductionIn denna artikel kommer jag visa dig hur man skriver kod för ett bildgalleri. En bildgalleriet är bara en samling av bilder. Vanligtvis dessa bilder är små. När du klickar på en du ser en förstorad form av it.You behöver grundläggande kunskaper i HTML, CSS, JavaScript och DOM att förstå denna artikel. Obs: Om du inte kan se koden, eller om du tror att något saknas i den här artikeln (bruten länk, bild frånvarande), bara att kontakta mig på [email protected]. Det är, kontakta mig för minsta problem du har om vad du är reading.
Some CSS och JavaScript PrinciplesOne bild kan visas på samma webbsida genom att mer än en bildtaggar. Det viktiga för att visa en viss bild är värdet (URL) källattributet. Du kan använda JavaScript (och DOM) för att ändra detta värde för en bildtagg. En bild tagg kan ha många attribut och värden. Om du bara ändra värdet på källattributet av bildtaggen, kommer bilden taggen visar förändras. Dock kommer den nya bilden har samma CSS-egenskaper (storlek, till exempel) som tidigare image.ExampleThere finns olika mönster för ett bildgalleri. Jag kommer att använda ett enkelt exempel här.
Efteråt kan du ändra koden för att passa din kommersiella projekt. I detta exempel finns det fem små bilder i en webbsida. När du klickar på en liten bild visas dess förstorad form högre upp på sidan. De fem bilder i rad. LayoutWhenever delar av din hemsida är i form av ett rutnät, rad eller kolumn, kan du använda HTML-tabellelement. Så det här exemplet, behöver du två tabeller. Den första högre upp på webbsidan har en rad och tre celler. Den första cellen kan ha en viss text. Den andra cellen har den förstorade bilden, och den tredje cellen kan ha en viss text.
Den andra tabellen har en rad men med fem celler för de fem små bilder. Alla de små bilderna är av samma storlek. Det finns bara en stor bild, vilket är den förstorade bilden. Detta är HTML-koden för tabellelement: Viss text kan gå here.Some text kan gå here.src = "img2.jpg" onclick = "förstora (händelse)" Omdömen