Slikovnim mapama definiramo dio ili više dijelova slike koji postaju polazištima
hiperveza. Na ovoj slici, primjerice, imamo definirane tri hiperveze. Isprobajte
ih!
Kliknite na svaki od likova!
Klikom na dio slike na kojem se nalazi plavi kvadrat otići ćete na naslovnicu
službenog CARNetovog web sjedišta, crveni krug odvest će vas na Nacionalni portal
za učenje na daljinu „Nikola Tesla”, a žuta zvijezda na katalog web stranica stranice
lijepe naše.
HTML oznaka ove slike sadrži jedan novi atribut, a izgleda ovako:
Novi atribut je, naravno, usemap. Njime definiramo
mapu u kojoj su opisana područja slike koja su polazišta hiperveza. Obratite pozornost
na znak # ispred imena mape.
Postoje tri vrste područja koja možemo definirati: kvadrat, krug i poligon. Njihove
koordinate navedeni su u mapi, koju definiramo oznakom <map>:
Oznaka <map> dolazi uz atribut name
kojim čija vrijednost odgovara imenu mape definiranom u oznaci
<img>. Unutar mape definiramo svako područje na slici
koje je polazište hiperveze. To činimo oznakom <area>
(engl. područje). Ona nema svog završnog dijela, a uz atribut
href i title, poznatih iz elementa
a, te atributa alt, poznatog
iz elementa img, sadrži i dva nova atributa:
shape
definira oblik područja. Vrijednosti ovoga atributa mogu biti
rect (pravokutnik), circle
(krug) ili poly (poligon).
coords
određuje koordinate područja na slici, koje definiramo na poseban način
za svaku vrstu područja.
Redoslijed definiranja područja unutar mape nije bitan. No ako se definirana
područja preklapaju, prednost će imati ono područje čije koordinate su u mapi
prije definirane.
Pri definiranju koordinata za sve vrste područja vrijedi isto pravilo: ishodište
koordinatnog sustava je gornji lijevi kut slike, gdje os x raste udesno,
a os y prema dolje. Mjerna jedinica su, naravno, pikseli.
shape="rect"
Koordinate kvadrata određujemo tako da prvo definiramo gornju lijevu, a
zatim donju desnu točku kvadrata.
shape="circle"
Krug će definirati koordinate središta kružnice, te njezin polumjer.
shape="poly"
Izgled poligona definirat ćemo koordinatama svake njegove ključne točke.
Koordinate točaka definiramo onim redoslijedom kojim njihovo spajanje čini naš
poligon.
U dokument zadaci.htm postavite
sliku sa četiri raznobojna CARNetova znaka. Na svaku
od njih postavite link na neku od CARNetovih stranica odgovarajućeg sadržaja,
pri čemu za prve tri kao ključ upotrijebite boje iz navigacije na vrhu
naslovnice (zeleno su škole,
ljubičasto fakulteti i instituti, plavo ustanove članice), dok na sivu postavite
link na naslovnicu CARNetovog web sjedišta.
Pregledajte svoju stranicu i isprobajte linkove. Jeste li postavili atribut
title?
Prethodni se zadatak mogao jednostavnije riješiti tako da se slika razlomila
na četiri slike i da se na svaku od njih postavio po jedan link. Zato kao dodatni
izazov možete riješiti još jedan zadatak: postavite iste linkove na
CARNetov logotip, ali tako da najmanji krug vodi na
škole, malo veći na ustanove članice, sljedeći na fakultete i institute, a posljednji
na naslovnicu CARNeta. Krugove ćete moći postaviti samo približno, no bit će
dovoljno da korisnici uoče naslove linkova i kliknu na odgovarajući link. Koordinate
izmjerite u nekom od grafičkih programa.
