Tema
7. - DEFINIRANJE MAPE SLIKE |
a) Općenito o mapi slike
Do sada smo naučili kako možemo izvesti link pomoću neke slike.
Međutim, u HTML-u postoji mogućnost da na jednoj slici definiramo više područja od kojih svako može upućivati na drugi link...
Za početak, prvo moramo izraditi ili izabrati neku pogodnu sliku.
Zatim, u nekom pogodnom editoru slika, izračunamo i zabilježimo početne i krajnje pozicije područja koje želimo koristiti za linkove.
Za izradu mape slike postoje mnogi specijalizirani programi koji automatski izračunavaju potrebne parametre, međutim, kako bi bolje razumjeli izvorni način definiranja ovih područja, evo nekoliko napomena:
- Kao mjerne jedinice koristimo isključivo pixele.
- Orjentacije radi, gornji lijevi kut slike uvijek predstavlja početni kut (x=0 pixela, y=0 pixela)
- X-osa je zamišljena vodoravna linija koja počinje u gornjem lijevom kutu i proteže se na desno...
- Y-osa je zamišljena okomita linija koja počinje u gornjem lijevom kutu i proteže se prema dnu slike...
Područja koja na slici definiramo zovu se AREA i mogu biti u tri oblika (SHAPE), i to:
- RECT - oblik četverokuta, za koji moramo definirati početni (gornji lijevi) i završni (donji desni) kut, s tim da za svaki kut prvo zabilježimo vrijednost u pixelima za X-osu pa onda za Y-osu. Dakle, ova definicija ima 4 broja, i to: x1, y1, x2, y2.
- CIRCLE - oblik kruga, za koji moramo definirati središte kruga (prvo po X-osi pa onda po Y-osi) i zatim polumjer kruga. Dakle, ova definicija ima ukupno 3 broja, i to: x, y, r.
- POLY - oblik poligona (lik s minimalno 3 stranice, pa nadalje...) za koji moramo definirati svaku točku prijeloma (prvo po X-osi pa onda po Y-osi). Dakle, ova definicija uvijek ima duplo više brojeva od broja stranica lika koji predstavlja (x1, y1, x2, y2, x3, y3, x4, y4, x5, y5 - za peterokut, na primjer)...
No, da previše ne teoretiziramo (obzirom da je u praksi sve ovo jednostavnije nego što se na prvi pogled čini!) evo jednog primjera.
Dolje sam izabrao jednu sliku veličine 300 pixela po X-osi (vodoravnoj) i 200 pixela po Y-osi (okomitoj). Pogledajte oznake tih osa!
Početno mjesto za svaki daljnji obračun je gornji lijevi kut slike (0 pixela i po X i po Y osi - kako i piše).
(Plava boja na slici predstavlja samo mjerilo za orjentaciju!)
Na slici sam namjerno crvenom bojom nacrtao sljedeće likove:
- KRUG (CIRCLE), sa centrom na poziciji X=75 pixela, Y=80 pixela i s radijusom R=50 pixela. Uočite te pozicije!
U HTML-u takvo bi područje obilježili kao:
<AREA SHAPE="CIRCLE" COORDS="75,80,50" HREF="stranica1.htm">
- ČETVEROKUT (RECT), s početnom pozicijom na X=200 pixela, Y=30 pixela i s krajnjom pozicijom na X=280 pixela, Y=130 pixela. Uočite te pozicije!
U HTML-u takvo bi područje obilježili kao:
<AREA SHAPE="RECT" COORDS="200,30,280,130" HREF="stranica2.htm">
- POLIGON (POLY), s prvom točkom na X=100 pixela, Y=150 pixela, drugom točkom na X=170 i Y=130 pixela, trećom točkom na X=230 i Y=170 pixela i četvrtom točkom na X=120 i Y=180 pixela. Uočite te pozicije!
U HTML-u takvo bi područje obilježili kao:
<AREA SHAPE="POLY" COORDS="100,150,170,130,230,170,120,180" HREF="stranica3.htm">
U navedenim naredbama parametar COORDS=... popunjavamo gore navedenim pozicijama po X/Y osi, točno onim redoslijedom kako je navedeno u objašnjenju, dok HREF=... predstavlja link (adresu) HTML stranice koju želimo učitati kada korisnik klikne mišem na tom području.
Parametri AREA i SHAPE objašnjeni su već prije.
Kompletna definicija MAPE slike u HTML dokumentu dolazi unutar <BODY> strukture i izgledala bi ovako:
HTML naredba | Objašnjenje | Rezultat u browseru |
<MAP NAME="MapaSlike1"> |
početak i ime
mape oblik kruga, koordinate i odredišni link oblik kvadrata, koordinate i odredišni link oblik poligona, koordinate i odredišni link kraj mape poziv mape IMG naredbom uz navod imena (USEMAP=...) |
Dok prelazite mišem preko područja kruga, četverokuta ili poligona koji su nacrtani na gornjoj slici, primjetit ćete da se radi o područjima koja upućuju na linkove.
Krug ima link na sliku "ds-img01.jpg", četverokut na sliku "ds-img02.jpg" a poligon na sliku "ds-img03.jpg").
Na isti način linkovi su mogli upućivati i na druge HTML stranice.
U prilogu se nalazi datoteka ds-vje7a.htm koja prikazuje uporabu ovih naredbi u praksi.
Njen izvorni kod slobodno možete mijenjati u cilju vježbe.
b) Područje u obliku četverokuta (AREA SHAPE="RECT"...)
Ovdje ćemo pojednostaviti i definirati mapu slike gdje će biti aktiviran samo oblik četverokuta (RECT):
HTML naredba | Objašnjenje | Rezultat u browseru |
<MAP NAME="MapaSlike1"> |
početak i ime
mape oblik kvadrata, koordinate i odredišni link kraj mape poziv mape IMG naredbom uz navod imena (USEMAP=...) |
U prilogu se nalazi datoteka ds-vje7b.htm koja prikazuje uporabu ovih naredbi u praksi.
Njen izvorni kod slobodno možete mijenjati u cilju vježbe.
c) Područje u obliku kruga (AREA SHAPE="CIRCLE"...)
Ovdje ćemo definirati mapu slike gdje će biti aktiviran samo oblik kruga (CIRCLE):
HTML naredba | Objašnjenje | Rezultat u browseru |
<MAP NAME="MapaSlike1"> |
početak i ime
mape oblik kruga, koordinate i odredišni link kraj mape poziv mape IMG naredbom uz navod imena (USEMAP=...) |
U prilogu se nalazi datoteka ds-vje7c.htm koja prikazuje uporabu ovih naredbi u praksi.
Njen izvorni kod slobodno možete mijenjati u cilju vježbe.
d) Područje u obliku poligona (AREA SHAPE="POLY"...)
Ovdje ćemo definirati mapu slike gdje će biti aktiviran samo oblik poligona (POLY):
HTML naredba | Objašnjenje | Rezultat u browseru |
<MAP NAME="MapaSlike1"> |
početak i ime
mape oblik poligona, koordinate i odredišni link kraj mape poziv mape IMG naredbom uz navod imena (USEMAP=...) |
U prilogu se nalazi datoteka ds-vje7d.htm koja prikazuje uporabu ovih naredbi u praksi.
Njen izvorni kod slobodno možete mijenjati u cilju vježbe.