Ö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.

  1. När man klickar på respektive "knapp" (<div>) så skall bilden som visas bytas ut (och dess alt-attribut).
  2. 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.
  3. 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.

Praktisk övning 8, del 1

  1. 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.
  2. 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!

Praktisk övning 8, del 2