HTML Frames

7. Povezivanje okvira

Šećer na kraju !!!
Ovaj dio FRAME tutorial-a upoznat će vas kako povezati okvire međusobno tj. kako u jedan okvir staviti linkove na html dokumente koji će se prikazati u drugom okviru kada kliknemo na određeni link. To je najvažniji dio ovog priručnika pa zato pažljivo proučite naredne lekcije.

1. Jednostavno povezivanje

Jednostavno povezivanje nazvano je zato jer ćemo jednostavno povezati dva okvira. U lijevom okviru nalaziti će se linkovi, a u desnom okviru će se izmjenjivati slijedeći body dokumenti: doc_a.html , doc_b.html , doc_c.html i doc_d.html .

Kako ćemo to uraditi ??? Vrlo jednostavno. Kada budemo definirali okvire pomoću NAME atributa FRAME taga ćemo dodijeliti naziv svakom okviru, a zatim će se taj naziv upotrijebiti pri definiranju linka. Odnosno, taj naziv će se upotrijebiti kao vrijednost TARGET atributa od A taga. Nadam se da se sjećate target atributa, a ako ne idite ovdje .
Kako to sve djeluje pogledajte u narednom primjeru.
Vidi primjer !!!     Vidi mu code !!!

Ako pogledamo source code vidjet ćemo da smo pomoću name="lijevi" te name="desni" imenovali lijevi i desni okvir. Naziv desni smo kasnije upotrijebili u body dokumentu linkovi.html kada smo definirali linkove (što se može vidjeti ako mu pogledate source ).

Vjerojatno se sada pitate što bi se npr. desilo da pri definiranju linkova nismo upotrijebili atribut target="desni". U tom slučaju bi se body dokument na koji link pokazuje učitao u istom okviru u kojem je i link.

2. Link na IFRAME okvir

Povezivanje html dokumenta i prozorčića definiranog s IFRAME tagom je gotovo identična stvar. Dakle, prvo definiramo NAME atribut IFRAME taga, a zatim tu vrijednost (naziv) upotrijebimo kao vrijednost TARGET atributa kod A taga.
Vidi primjer !!!     Vidi mu code !!!

3. Rezervirani target nazivi

Rezervirani target nazivi počinju s crticom _ (underscore) i mogu biti:
_blank otvara dokument na koji pokazuje link u novom prozoru,
_self otvara dokument u istom okviru u kojem je link i to je default browsera,
_parent otvara dokument u roditeljskom (gornjem) okviru (frameset tagu) i
_top zatvara sve okvire i otvara dok. u cijelom prozoru

Primjer

Slijedeći primjer je dosta kompliciran jer smo u njega ubacili sve rezervirane target nazive. Upotrijebljena su 4 body dokumenta:
blank.html     Vidi mu code !!!
self.html     Vidi mu code !!!
parent.html     Vidi mu code !!!
top.html     Vidi mu code !!!


Osim toga upotrijebljena su i dva frameset dokumenta:
16link_reserv2.htm     Vidi mu code !!!
Te njegov parent okvir (frameset dokument):
16link_reserv.htm     Vidi mu code !!!

I jedna važna napomena. Vrijednost _parent može raditi samo ukoliko smo roditeljski okvir definirali u jednom fajlu, a umetnuti okvir u drugom. Dakle, ako smo okvir umetnuli direktno (i roditelj i frameset dokument su u istom fajlu) target="_parent" neće otvarati dokument u okviru koji je po hijerarhiji iznad. U tom slučaju ponašat će se kao da smo napisali target="_top". To mi baš i nije logično no budući da se isto dešava i kod Internet Explorera i u Mozilli ne radi se o nikakvom bug-u browsera.
    U narednom primjeru pokušajte otvoriti stranicu B i vidjet ćete da nije isto kao u prethodnom primjeru .
Vidi primjer !!!     Vidi mu code !!!

4. Jedan klik - dva okvira

Pitanje glasi: Kako jednim klikom na link istodobno promijeniti sadržaj u dva (ili više) okvira.
ODGOVOR: Vrlo jednostavno.
KaKo ???
Tako što ćemo kliknuvši na link učitati novi frameset dokument (a ne body) koji sadrži dva okvira.

Primjer

Ovaj primjer sadrži 1 body dokument koji sadrži link i učitava se u lijevi okvir:
link.html     Vidi mu code !!!

Također sadrži i 3 frameset dokumenta od kojih se prva dva umeću u treći:
umetanje_prazno.htm     Vidi mu code !!!
umetanje_puno.htm     Vidi mu code !!!
Prvi fajl se otvara čim otvorimo baza.htm, a drugi ga zamijeni kad kliknemo na link u lijevom okviru.

Treći frameset dokument je roditelj od prva dva i to je ujedno i naš primjer:
baza.htm     Vidi mu code !!!

Savjeti, trikovi preporuke ...
Kako učitati reklamni banner u okvir ???
Pogledajte u narednoj i posljednjoj lekciji !