Przenoszenie podpisu i alt z miniatury
Treść zadania
W sklepie mamy zdjęcie <img id="widok" src="but1.jpg" alt="Buty czerwone">, podpis <p id="podpis">Buty czerwone</p> oraz miniaturę <img id="miniaturaNiebieska" src="but2.jpg" alt="Buty niebieskie">.
Po kliknięciu miniatury #miniaturaNiebieska:
1. Przypisz jej src do zdjęcia #widok.src.
2. Przypisz jej alt do #widok.alt.
3. Przepisz tekst z jej alt do akapitu #podpis.textContent.
Co będzie oceniane
- Aktualizacja #widok.src na but2.jpg.
- Aktualizacja #widok.alt na 'Buty niebieskie'.
- Aktualizacja #podpis.textContent na 'Buty niebieskie'.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (1)
- Zmiana zdjęcia, alt i podpisu na niebieskie buty — atrybut #widok = but2.jpg; atrybut #widok = Buty niebieskie; tekst #podpis = Buty niebieskie
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Podmień src, alt i podpis po kliknięciu #miniaturaNiebieska
Wskazówki
Wskazówka 1
Właściwość alt obiektu miniatury przechowuje gotowy tekst alternatywny, który można wykorzystać zarówno do opisu dostępności, jak i podpisu widocznego.
Wskazówka 2
Zarejestruj kliknięcie na miniaturze i przypisz jej właściwości źródła oraz tekstu alternatywnego do odpowiednich pól zdjęcia głównego oraz akapitu podpisu.