Hoe maak ik een HTML-afbeeldingskaart?
Wanneer een link wordt toegevoegd aan een afbeelding in Hypertext Markup Language (HTML), wordt die link toegevoegd aan de gehele afbeelding. Dit kan een probleem zijn als de programmeur een enkele afbeelding met meerdere gebieden of knoppen wil maken en elk gebied voor een andere link wordt gebruikt. Met een HTML-afbeeldingskaart kan de programmeur bepaalde gebieden opgeven waar de link naartoe gaat, waardoor hij of zij meerdere links in één afbeelding kan opnemen. Dit wordt gedaan door een vorm voor de link op te geven en de HTML te vertellen welke coördinaten voor de link moeten worden gebruikt.
Afbeeldingen die voor internet worden gebruikt, worden gemeten in pixels. Weten hoeveel pixels in de afbeelding staan, is de eerste essentiële stap bij het maken van een afbeeldingmap. Er wordt bijvoorbeeld een rechthoekig beeld gebruikt met een hoogte van 400 pixels en een breedte van 250 pixels. Vervolgens moet de programmeur weten hoe de vorm in coördinaten nauwkeurig kan worden gemeten om de HTML-afbeeldingskaart correct te laten werken.
De linkerbovenhoek wordt 0,0 genoemd bij gebruik van een HTML-afbeeldingskaart. De rechteronderhoek in dit geval zou 250.400 zijn. De metingen worden eerst uitgevoerd met de breedte en vervolgens de hoogte. Een gemakkelijke manier om eraan te denken is dat de eerste meting de HTML vertelt hoe ver naar rechts vanaf de linkerrand moet gaan en de tweede is hoe te vertellen hoeveel pixels er nog te gaan zijn. Als de programmeur een punt op de kaart 10 pixels vanaf de linkerrand en 50 pixels naar beneden wil hebben, zouden de coördinaten 10,50 zijn.
Er zijn drie verschillende vormen die de programmeur kan aanroepen voor een HTML-afbeeldingskaart: rechthoek, cirkel en polygoon. "Rect" staat voor rechthoek en het programmeerapparaat moet eerst de coördinaten voor de linkerbovenhoek en vervolgens de rechteronderhoek typen. Een cirkel wordt opgegeven door de coördinaten te typen waar de cirkel begint en vervolgens de straal van de cirkel. Een polygoon wordt gemaakt door alle vijf coördinaten in te typen, van boven naar rechts.
Codering van HTML-afbeeldingskaarten gaat als volgt: <map name = "test">
<area href = "url.html" shape = rect coordins = "10,50,20,60">
<area href = "url.html" shape = cirkel coops = "10,50,4">
<area href = "url.html" shape = polygon coordins = "10,50,12,55,15,60,13,65,8,55">
Elke HTML-afbeeldingskaart moet een naam hebben en de sectie 'url.html' is de link waar dat gedeelte van de afbeeldingskaart een gebruiker naar toe leidt wanneer hij erop klikt. Wanneer de afbeelding met HTML op de website wordt geplaatst, moet de programmeur schrijven: usemap = "test." Dit vertelt de afbeelding welke HTML-afbeeldingskaart moet worden gebruikt.