Kako postaviti dio slike kao link
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:
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:
Hvala!
| Autor: Vedran | Datum objave: 21.07.2008 |
|
KOMENTARI:
Samo registrirani korisnici mogu komentirati.