24/25.4 Primenjene informacione tehnologije 4

Zadatak:

Kreirati web stranicu u kojoj se prikazuju 4 slike i njihovi opisi na sledeći način:

• Na sredini prvog reda treba da je naslov: Slike
• ispod treba da je kontejner dimenzija 640x640px
  • prvih 120px visine kontejnera rezervisati za opise slika
  • sledećih 420px koristiti za prikaz jedne velike slike
  • poslednjih 100px visine kontejnera (poslednji red) iskoristiti da se u jednom redu prikažu 4 različite slike
  Klikom na malu sliku treba da se ta slika prikaže u centralnom delu, a opis slike treba da se postavi u gornji deo kontejnera

Za prvi deo zadatka je potrebno ponoviti gradivo iz Web dizajna (2.razred) - za postavljanje traženog izgleda pomoću CSS-a.
... Ne postoji samo jedno rešenje - dosta je različitih načina da se dobije isti ili sličan izgled web stranice. (na slici se vidi kako je to urađeno na času)

Za drugi deo zadatka je potrebno ponoviti gradivo iz Web Programiranja (3.razred) - za promenu slike prilikom klika na malu sliku.
... Ne postoji samo jedno rešenje - dosta je različitih načina da se dobije isti efekat:

• rad sa "čistim" JavaScript-om - ili korišćenjem eventListener-a ili pozivanjem funkcija iz HTML tag-a
• rad sa nekom JavaScript bibliotekom (kao što je jQuery, Fotorama, ili nešto slično)

Ovaj put će da se koristi običan JavaScript i pozivanje funkcija iz HTML tag-a.

1. verzija: funkcija kojoj se kao argument prosleđuje adresa slike (za svaku malu sliku pri pozivu funkcije koristiti kao argument njen src)
   
   

   function zameniA(adresa)
   {
     document.getElementById("idVelikeSlike").src = adresa;
   } 

   • Kako bi to izgledalo u HTML-u:
     

                 <img src="slika1.jpg" onclick="zameniA('slika1.jpg')">

2. verzija: funkcija kojoj se kao argument prosleđuje kompletna slika sa svim njenim atributima (za svaku malu sliku se pri pozivu funkcije koristi argument this)

   function zameniT(slika)
   {
     document.getElementById("idVelikeSlike").src = slika.src;
   } 

   • Kako bi to izgledalo u HTML-u:
     

                 <img src="slika1.jpg" onclick="zameniT(this)">

Za treći deo zadatka ovaj put koristimo Fetch API

...