Zamiana zdjęcia po kliknięciu myszką w galerii

Witam.

Mam mam prośbę o pomoc w rozwikłaniu takiego zadania. W załączniku plik html z przygotowanymi grafikami.
Po otwarciu pliku "cars_galery.html" w górnej części znajduje się mniej więcej przygotowana galeria.
W górnej części mają być wyświetlone grafiki większe 200x150 "car4_0200x0150.jpg"
(przy starcie jest na razie szary jpg) a poniżej są wyświetlane przygotowane już miniaturki "car4_0100x0075.jpg".
Przygotowałem też miniaturki podświetlone na czerwono car4p_0100x0075.jpg (literka p po cars4).

W sumie w działaniu miało by to wyglądać jak galeria np na allegro że po najechaniu myszką na miniaturki będą się podświetlać może to być jakaś funkcja tylko nanosząca kolor bez potrzeby zbędnego ładowania podświetlanych miniaturek.

Natomiast po kliknięciu myszką na daną miniaturkę w dużym polu w miejsce szarego ma się załadować odpowiedni duży obrazek i tam zostać aż do kliknięcia na inna miniaturkę.

Jeśli cała obsługa korzystała by z tych samych tylko dużych plików bez potrzeby robienia miniatur było by super.

Ja wczoraj przeglądałem takie gotowe przykłady ale moja wiedza z htmla jest mizerna więc poległem. Będę wdzięczny za pomoc. Pozdrawiam.

Tutaj trzeba będzie użyć js (przykładowe ładowanie dużego zdjęcia po kliknięciu w miniaturkę):
https://jsbin.com/vuzepajiqe/1/edit?html,output

Cześć.

Dzięki za rozwiązanie, i działa jak trzeba tylko ja mam problem z sklejeniem tego w jednym pliku html (w załączniku). Coś nie działa bo nie reaguje na kliknięcie. Prosiłbym o zerknięcie i poprawki.

A druga sprawa.. prosiłbym o dodanie załadowanie na starcie jakiegoś obrazka (pierwotnie miał być szary ale niech będzie pierwszy z listy, podmienię go sobie wg potrzeb) o ile to możliwe już w sekcji body. Ja skopiowałem co prawda w edytorze którego link podesłałeś ale wtedy wszystkie obrazki się rozjechały po kliknięciu.