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.

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.