Övning 8: Galleriet
Öppna mappen po8
i Visual Studio Code (eller den editor du föredrar). Studera HTML- och CSS-koden och skriv sedan den JavaScript-kod som krävs för att uppfylla nedanstående.
- När man klickar på respektive "knapp" (
<div>
) så skall bilden som visas bytas ut (och dess alt-attribut).
- Bilderna finns i varsitt objekt i en array
images
. Varje objekt har två egenskaper, src och alt. Du kommer t.ex. åt andra bildens källa med images[1].src
.
- Det finns lika många bilder i arrayen som knappar så utgå från index i en for-loop när du byter ut bilder.
- I nästa steg ska du lägga till en förstoringsfunktion. När man klickar på bilden som visas skall den dyka upp i större format som täcker hela skärmen. HTML och CSS för detta finns färdigt.
- Om man klickar på den förstorade bilden eller dess något mörkare bakgrund skall den stängas. Med andra ord ska du skapa en väldigt enkel galleri-funktion!