Hiperveze

Slikovne mape

     

Slikovnim mapama definiramo dio ili više dijelova slike koji postaju polazištima hiperveza. Na ovoj slici, primjerice, imamo definirane tri hiperveze. Isprobajte ih!

www.CARNet.hr LMS Nikola Tesla www.hr Pričekaj sliku i klikni!
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:

<img border="0” src="images/mape.png"
     width="356” height="88” usemap="#mapa">

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

<map name="mapa">

  <area shape="rect" coords="9, 37, 106, 66"
  alt="www.carnet.hr"
  href="http://www.carnet.hr/">

  <area shape="circle" coords="185, 48, 35"
  alt="LMS Nikola Tesla"
  href="http://lms.carnet.hr/">

  <area shape="poly" coords="291, 27, 303, 2,
  316, 29, 346, 34, 324, 53, 329, 83, 304, 68,
  277, 83, 283, 53, 263, 33"
  alt="www.hr"
  href="http://www.hr/">

</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.

CARNet - puni naziv i logo