Mapiranje slike je dodela višestrukih linkova pojedinim delovima njene površine, tzv. hot-spots. U HTML-u to se postiže korišćenjem tagova: <MAP> i <AREA>, ali mi nećemo to raditi „ručno“, već ćemo u pomoć pozvati aplikaciju Dreamweaver uz koju ćemo, uz pomoć vizuelnih alatki, rešiti ovaj problem.
Prethodno pripremite sliku za vaš web sajt, ali pazite da ne bude prevelika. Pokrenite Dreamweaver i otvorite vašu web stranicu. Kliknite u stranicu, tamo gde želite da dodate sliku. Sada ćemo dodati sliku stranici i pripremiti mapu slike.
- Izaberite meni „Insert -> Image“.
- U sledećem dijalog prozoru pronađite vašu sliku na disku, kliknite na nju i pritisnite „OK“.
- Slika će biti ubačena u stranicu.
Sada ćemo pozvati paletu za podešavanje osobina objekata na stranici, izaberite meni „Window -> Properties“ ili pritisnite kombinaciju „Ctrl+F3“. Pojaviće vam se paleta za podešavanje, ukoliko je nevidite celu, kliknite na mali, beli trouglić u donjem desnom uglu palete. Ovaj donji deo je namenjen za mapiranje slika. Zapazite u donjem levo uglu tri alatke:
- Rectangular Hotspot Tool – namenjena kreiranju pravouglih, osetljivih površina
- Oval Hotspot Tool – namenjena kreiranju kružnih, osetljivih površina
- Polygon Hotspot Tool – namenjena kreiranju osetljivih površina nepravilnog oblika.
Selektujte sliku na stranici i izaberite jedan od ova tri alata. Dovedite pokazivač na površinu slike i jednostavno „crtajte“ željenu površinu linka. Uglavnom ćete pokriti neke naslove koji će linkovati na neke druge sadržaje. Kada ste dodali hotspot ostaje vam da datoj osetljivoj površini dodate link. Pređite na paletu „Properties“ i u polje link unesite apsolutnu ili relativnu adresu do željene stranice. U polju „Target“ možete birati na koji način će se otvoriti linkovana stranica (npr. u istom prozor, u novom prozoru). A u polju „Alt“ unesite alternativni naslov, tj. tekst koji će se pojaviti kao „ToolTip“ kada mišem dođete iznad odgovarajućeg linka. Kada izvršite sva podešavanja za jednu sliku, onda ste izvršili mapiranje slike.
Pratite Krstaricu na www.krstarica.com