Jak vytvořím obrazovou mapu HTML?
Pokud je k obrázku přidán odkaz v jazyce Hypertext Markup Language (HTML), bude tento odkaz přidán do celého obrázku. To může být problém, pokud chce programátor vytvořit jeden obrázek s několika oblastmi nebo tlačítky a každá oblast je použita pro jiný odkaz. Obrazová mapa HTML umožňuje programátorovi určit určité oblasti, kam bude odkaz směřovat, což mu umožní vložit několik odkazů do jednoho obrázku. To se provádí zadáním tvaru odkazu a sdělením HTML, jaké souřadnice se mají pro odkaz použít.
Obrázky používané pro internet se měří v pixelech. Vědět, kolik pixelů je v obraze, je prvním nezbytným krokem k vytvoření obrazové mapy. Používá se například obdélníkový obraz, který má výšku 400 pixelů a šířku 250 pixelů. Dále musí programátor vědět, jak přesně měřit tvar v souřadnicích, aby obrazová mapa HTML fungovala správně.
Při použití obrazové mapy HTML se levý horní roh nazývá 0,0. Pravý dolní roh by v tomto případě činil 250 400. Měření se provádí nejprve se šířkou a poté s výškou. Snadný způsob, jak si to představit, je to, že první měření říká HTML, jak daleko doprava jde od levého okraje a druhým je, jak říct, kolik pixelů má jít. Pokud programátor chce, aby bod na mapě byl 10 pixelů od levého okraje a 50 pixelů dolů, souřadnice by byly 10,50.
Programátor může vyvolat pro obrazovou mapu HTML tři různé tvary: pravý, kruhový a mnohoúhelník. "Rect" znamená obdélník a programátor musí nejprve zadat souřadnice do levého horního rohu a poté do pravého dolního rohu. Kruh je určen zadáním souřadnic, kde kruh začíná, a poté poloměrem kruhu. Mnohoúhelník je vytvořen zadáním všech pěti souřadnic, shora dolů.
Kódování obrazové mapy HTML vypadá takto: <map name = "test">
<area href = "url.html" shape = rect coords = "10,50,20,60">
<area href = "url.html" shape = circle coords = "10,50,4">
<area href = "url.html" shape = polygon coords = "10,50,12,55,15,60,13,65,8,55">
Každá obrazová mapa HTML musí mít jméno a část „url.html“ je odkazem, kde tato část obrazové mapy povede uživatele, když na něj klikne. Když je obrázek umístěn na web pomocí HTML, musí programátor napsat: usemap = "test". To řekne obrázku, který obrázek HTML má použít.