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:

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:

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">

<AREA SHAPE="
CIRCLE"
COORDS="
75,80,50"
HREF="
ds-img01.jpg">

<AREA SHAPE="
RECT"
COORDS="
200,30,280,130"
HREF="
ds-img02.jpg">

<AREA SHAPE="
POLY"
COORDS=
"
100,150,170,130,230,170,120,180"
HREF="
ds-img03.jpg">

</MAP>

<img src="
ds-mapa.jpg" border="0"
width="300" height="200"
usemap="
#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">

<AREA SHAPE="
RECT"
COORDS="
200,30,280,130"
HREF="
ds-img02.jpg">

</MAP>

<img src="
ds-mapa.jpg" border="0"
width="300" height="200"
usemap="
#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">

<AREA SHAPE="
CIRCLE"
COORDS="
75,80,50"
HREF="
ds-img01.jpg">

</MAP>

<img src="
ds-mapa.jpg" border="0"
width="300" height="200"
usemap="
#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">

<AREA SHAPE="
POLY"
COORDS=
"
100,150,170,130,230,170,120,180"
HREF="
ds-img03.jpg">

</MAP>

<img src="ds-mapa.jpg" border="0"
width="300" height="200"
usemap="#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.