Izdelava in vključitev interaktivne navigacijske slike (Image Map)

Navigacijska slika (Image Map) omogoča, da na posamezna klikljiva območja ene same slike nastavite različne spletne povezave. Za pripravo koordinat boste uporabili brezplačno spletno orodje Online Image Map Editor.

Koraki za vključitev navigacijske slike:

1. Nalaganje slike v spletno orodje Online Image Map Editor

   Odprite spletno orodje Online Image Map Editor, naložite sliko s svojega računalnika in izbiro potrdite s klikom na gumb Accept.

    

   

   
    

2. Nastavitev atributov za povezave

   V orodju določite parametre območij na katera bo mogoče klikniti:

   • Shape (Oblika): Določite geometrijsko obliko območja (pravokotnik – rect, krog – circle ali poligon – poly).

   • Coords (Koordinate): Polje se samodejno izpolni ob risanju na sliko.

   • Href (Povezava): Vnesite ciljni URL-naslov povezave.

   • Alt (Alternativno besedilo): Vnesite opis povezave za optimizacijo strani (SEO) in dostopnost.

     (Vsaka vrstica v orodju predstavlja posamezno povezavo. Območja se med seboj ne smejo prekrivati.)

     

      

3. Risanje območij in generiranje HTML-kode

   Z miško na sliki označite želena območja na katera bo mogoče kliknit. Ko zaključite z označevanjem, se vam bo sekciji 3. Get the code zgenerirala koda, ki jo boste s pomočjo HTML izsečka prilepili na vašo spletno stran.

   

   
    

4. Nalaganje slike v Področje za datoteke

   Sliko, ki bo služila kot interaktivni zemljevid, v vašem urejevalniku naložite v Področje za datoteke. Po uspešnem nalaganju z desnim klikom na datoteko kopirajte njeno neposredno spletno povezavo (URL).

   

    

5. Vnos HTML-kode na spletno stran

   Na mesto, kjer želite prikazati interaktivno sliko, dodajte element HTML izseček ter vanj prilepite in prilagodite spodnjo kodo:

   <img src="" usemap="" />

   Ta del kode nam prikazuje sliko. V src vpišemo povezavo do slike, ki jo dobimo tako, da z desnim miškinim gumbom klikenmo na povezavo iz pravkar naložene fotografije v področje za datoteke.

   

    

   Pod pravkar dodano vrstico prilepimo še celotno kodo iz tretjega koraka.

   Sedaj lahko v usemap atribut vpišemo še ime zemljevida, ki ga najdemo v začetku kode, pod atributom ID, v kodi iz tretjega koraka. Ne pozabite dodati znaka #.

   Naša koda mora izgledati približno tako:

   

    

   Za konec HTML izseček shranimo, stran pa bi morala prikazati naš nov HMTL zemljevid.