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)

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

CSS:

  • Za sve slike postaviti da su okrugle (to može za ovakve zahteve zadatka)
  • za sve male slike postaviti istu klasu kojoj se postavlja da imaju isti width i height (npr 100px)
  • za veliku sliku postaviti veće dimenzije i da je na  sredini ekrana (margin: auto)
  • velikoj slici i mestu za opis postaviti ID

JS:

  • za sve postoji mnogo različitih načina za rad - u ovom zadatku koristimo pozivanje funkcija
  • akcije za male slike:
    • onclick="promena(this.src, brojReda)"
  • 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(adresaSlike, brojReda)
  {
    document.getElementById("velika").src = adresaSlike;
    preuzmiPodatke(brojReda);
   }
  • u ovakvoj funkciji se vidi da se keo prvi argument prenosi adresa fajla u kojem je slika
  • Na primer, ako je u pitanju prva slika, kojoj odgovara prvi red teksta, tada bi poziv funkcije iz tag-a slike izgledao ovako: 

    onclick = "promena(this.src, 1)"

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 i kada treba da se pusti zvuk (play()) ili zaustavi (pause())
    • može se Audio tag kreirati i u JavaScript-u, po potrebi - ovde će ova verzija biti prikazana: 

      function pustiZvuk() 
 {
    var audio = new Audio('tikTak.mp3');
    audio.play();
 }
    • a kako to izgleda u html-u: 
       
      <img src="slike/slika1.jpg" id="mala" onmouseover="pustiZvuk()" onmouseleave="zaustaviZvuk()">
    • Napomena: za zaustavljanje zvuka se koristi metoda pause()

Last modified: Thursday, 11 December 2025, 1:48 PM