Kreirati web stranicu u kojoj se prikazuju slike zanimljivih lokacija koje dolaze u obzir za ponovnu posetu prilikom letovanja. .

Na stranici treba da se nalaze 4 male slike i jedna velika slika, kao i mesto gde se ispisuje opis slike.
 ...        ...

  • Klikom na malu sliku treba da se ta slika prikaže u delu za veliku sliku, a opis slike da se prikaže u delu rezervisanom za opis.
  • Prelaskom miša preko velike slike treba da se čuje zvuk, a kada miš "izađe" sa područje velike slike, onda taj zvuk treba da prestane.

Materijali koji su potrebni za ovaj zadatak: zanimljivo.7z (klik za preuzimanje arhive, pa je raspakujte na vašem računaru)

****************************************************

Zadatak je predviđen za rad na bloku od 3 časa - koristi se čist JavaScript i Fetch API

*****************************************************************

Koraci u radu:

Početak:

  • kreirati folder u kojem se radi, otvoriti ga sa VS Code, pa kreirati fajlove za html, css, js
    • ! za šablonsko kreiranje html-a
  • Unutar ovog foldera postaviti folder za slike i tu ubaciti potrebne slike
  • Tekstualni fajl sa opisima slika ostaviti da je pored html fajla (i zvučni fajl isto)

HTML:

  • Postaviti naslov
  • Ispod naslova postaviti sve 4 slike
    • isti width i height + border-radius:50% za okrugle slike
    • može se koristiti kontejner za male slike, a ne mora - izbor je vaš
  • Ispod toga postaviti jednu veliku sliku
    • za početak tu staviti prvu sliku
  • Ispod velike slike postaviti deo u koji će se smeštati tekst opisa
    • može biti div, p, ili šta god želite
  • Audio tag možete postaviti bilo gde na stranici - bitno da ima src i neki id

( Iza sledećeg dugmeta je iz učionice )

CSS:

  • za sve male slike postaviti istu klasu kojoj se postavlja da imaju isti width i height (npr 100px) i da su okrugle (border-radius: 50%)
  • za veliku sliku postaviti veće dimenzije
  • za deo za tekst postaviti pozadinu u nekoj svetlijoj boji i širina da se poklapa sa širinom velike slike
  • (ovo je gradivo od ranije i ovde neće biti postavljana rešenja)

JS:

  • za sve postoji mnogo različitih načina za rad - u ovom zadatku koristimo pozivanje funkcija
  • akcije za male slike:
    • onclick="promena(this)"
  • akcija za veliku sliku:
    • onmouseover="pustiZvuk()"
    • onmouseleave="zaustaviZvuk()"

Kako se učitava fajl:

  • ovo može da se izvede na više načina:
    • korišćenjem moderne verzije - Fetch API i običnog JavaScript-a
    • korišćenjem starije verzije - AJAX i metoda get, uz korišćenje JQuery
  • u ovom zadatku će biti korišćen moderni pristup ( Fetch API ) 
  • radi jasnijeg prikaza koristiće se dve funkcije: 
    • funkcija za preuzimanje podataka preuzmiPodatke()

   U nastavku je iza dugmeta iz učionice

Jedan od načina da se u jednoj funkciji vrši i promena slike i promena teksta:

  • funkcija u kojoj se ujedno preuzimaju podaci i vrši promena slike 
     function promena(element)
  {
    document.getElementById("idVelikeSlika").src = element.src;
    preuzmiPodatke(element.id - 1);
   }
  • u ovakvoj funkciji se vidi da se kao prvi argument prenosi ceo element koji poziva finkciju ( slika ) - jet se koristi this
  • Čak i kada treba preuzeti podatke, iz elementa se ovde preuzme id i iskoristi za preuzimanje određenog opisa iz fajla
    • pošto su id pisani od 1 do 4, a redovi su nizovi gde indeksi počinju od 0, jasno je zašto se vrši -1
    • ako bi id slika pisali od 0 tada ne bi bilo potrebe za oduzimanjem
  • u nastavku je iz učionice

Kako se pušta zvuk:

  • I ovo može da se izvede na više načina, ali je zajedničko da se koristi HTML tag Audio:
    • može se postaviti tag bilo gde na stranicu 
    • kada treba da se pusti zvuk koristi se play()
    • kada treba da se zvuk zaustavi koristi se pause()
    •  
    • u nastavku je iz učionice

Last modified: Friday, 12 December 2025, 10:13 AM