Slikovna mapa (Image map) je tehnika u HTML-u kojom se na slici određuju područja koja će biti linkovi. Na jednoj slici možemo odrediti proizvoljan broj linkova. Jedino ograničenje je sama površina tj. veličina slike. Za određivanje linkova upotrijebit ćemo tagove <img>, <map> i <area>. Pogledajmo sada kako izgleda jedan jednostavan kod koji ćemo kasnije objasniti:
<MAP NAME="map1">
<AREA
HREF="index.php" ALT="Dizajn proizvoda" TITLE="Dizajn"
SHAPE=RECT COORDS="10,20,140,60">
<AREA
HREF="index.php" ALT="Testiranje je veoma vazno"
TITLE="Testiranje" SHAPE=CIRCLE COORDS="220,60,60">
<AREA
HREF="index.php" ALT="Razvoj proizvoda" TITLE="Razvoj"
SHAPE=RECT COORDS="10,120,140,160">
<AREA
HREF="index.php" ALT="Testiranje je veoma vazno"
TITLE="Testiranje" SHAPE=CIRCLE COORDS="220,200,60">
<AREA
HREF="new.html" ALT="Krajnji proizvod" TITLE="Proizvod"
SHAPE=POLY COORDS="70,193, 135,277, 112,281, 31,281, 6,277">
</MAP>
<IMG SRC="dijagram.gif"
ALT="Nasa slika" BORDER=0 WIDTH=300 HEIGHT=300
USEMAP="#map1">
Najprije smo definirali mapu koju primjenjujemo na našu GIF sliku. Unutar taga <map> definiramo područja mape pomoću taga <area>. Ova područja su ustvari naši linkovi. Tag <area> uzima atribut HREF u kojem definiramo link, atribute ALT i TITLE kao opis linka te još jedan atribut SHAPE. Ovo je atribut koji definira područje unutar kojeg ''vrijedi'' link, odnosno unutar kojega možemo kliknuti. To područje, SHAPE, može imati tri vrijednosti:
Default – određuje cijelo područje
Rect – određuje pravokutnik koji je definiran gornjom lijevom koordinatom i donjom desnom koordinatom
Circle – određuje krug koji je definiran koordinatama središta i samim polumjerom kruga
Poly – određuje proizvoljni poligon upisujući jednu koordinatu za drugom
Nakon određivanja mape preostaje nam još samo jedna stvar – dodavanje slike pomoću taga <img> u kojem koristimo atribut USEMAP. Ovaj atribut nosi vrijednost imena naše mape koju smo upravo definirali. Ime mape se dodaje na samom početku atributom NAME = "map1".
Elementi mape AREA se mogu i preklapati. U tom slučaju prednost ima onaj AREA element kojeg smo prvog upisali. Naravno, za linkove možete koristiti interne i vanjske linkove kao i mailto linkove. Na kraju nam ostaje još da vidimo kako gore napisani kod radi:
<MAP NAME="map1">
<AREA
HREF="index.php" ALT="Dizajn proizvoda" TITLE="Dizajn"
SHAPE=RECT COORDS="10,20,140,60">
<AREA
HREF="index.php" ALT="Testiranje je veoma vazno"
TITLE="Testiranje" SHAPE=CIRCLE COORDS="220,60,60">
<AREA
HREF="index.php" ALT="Razvoj proizvoda" TITLE="Razvoj"
SHAPE=RECT COORDS="10,120,140,160">
<AREA
HREF="index.php" ALT="Testiranje je veoma vazno"
TITLE="Testiranje" SHAPE=CIRCLE COORDS="220,200,60">
<AREA
HREF="new.html" ALT="Krajnji proizvod" TITLE="Proizvod"
SHAPE=POLY COORDS="70,193, 135,277, 112,281, 31,281, 6,277">
</MAP>
<IMG SRC="dijagram.gif"
ALT="Nasa slika" BORDER=0 WIDTH=300 HEIGHT=300
USEMAP="#map1">
Najprije smo definirali mapu koju primjenjujemo na našu GIF sliku. Unutar taga <map> definiramo područja mape pomoću taga <area>. Ova područja su ustvari naši linkovi. Tag <area> uzima atribut HREF u kojem definiramo link, atribute ALT i TITLE kao opis linka te još jedan atribut SHAPE. Ovo je atribut koji definira područje unutar kojeg ''vrijedi'' link, odnosno unutar kojega možemo kliknuti. To područje, SHAPE, može imati tri vrijednosti:
Default – određuje cijelo područje
Rect – određuje pravokutnik koji je definiran gornjom lijevom koordinatom i donjom desnom koordinatom
Circle – određuje krug koji je definiran koordinatama središta i samim polumjerom kruga
Poly – određuje proizvoljni poligon upisujući jednu koordinatu za drugom
Nakon određivanja mape preostaje nam još samo jedna stvar – dodavanje slike pomoću taga <img> u kojem koristimo atribut USEMAP. Ovaj atribut nosi vrijednost imena naše mape koju smo upravo definirali. Ime mape se dodaje na samom početku atributom NAME = "map1".
Elementi mape AREA se mogu i preklapati. U tom slučaju prednost ima onaj AREA element kojeg smo prvog upisali. Naravno, za linkove možete koristiti interne i vanjske linkove kao i mailto linkove. Na kraju nam ostaje još da vidimo kako gore napisani kod radi:
No comments:
Post a Comment