Podmiana źródła i opisu grafiki
Treść zadania
W galerii znajduje się obrazek <img id="zwierzak" src="placeholder.jpg" alt="Brak wyboru"> oraz przyciski <button id="btnPies">Pies</button> i <button id="btnKot">Kot</button>.
Napisz kod:
- po kliknięciu #btnPies ustaw src = 'pies.jpg' oraz alt = 'Zdjęcie psa',
- po kliknięciu #btnKot ustaw src = 'kot.jpg' oraz alt = 'Zdjęcie kota'.
Co będzie oceniane
- Pobranie referencji do obrazka i przycisków.
- Zmiana właściwości src na 'pies.jpg' lub 'kot.jpg'.
- Aktualizacja właściwości alt odpowiednim opisem tekstowym.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (2)
- Kliknięcie przycisku Kot zmienia grafikę i alt — atrybut #zwierzak = kot.jpg; atrybut #zwierzak = Zdjęcie kota
- Kliknięcie przycisku Pies zmienia grafikę i alt — atrybut #zwierzak = pies.jpg; atrybut #zwierzak = Zdjęcie psa
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Podmieniaj src oraz alt obrazka #zwierzak w zależności od klikniętego przycisku
Wskazówki
Wskazówka 1
Do atrybutów źródła pliku oraz tekstu alternatywnego odwołujesz się bezpośrednio jako do właściwości obiektu obrazu.
Wskazówka 2
Zarejestruj zdarzenia kliknięcia dla obu przycisków i w ich ciałach przypisz właściwe nazwy plików graficznych oraz opisy do właściwości obrazka.