När en länk läggs till en bild i Hypertext Markup Language (HTML), läggs den länken till hela bilden. Detta kan vara ett problem om programmeraren vill göra en enda bild med flera områden eller knappar och varje område används för en annan länk. En HTML-bildkarta tillåter programmeraren att specificera vissa områden där länken ska gå, vilket gör att han eller hon kan bädda in flera länkar i en bild. Detta görs genom att ange en form för länken och tala om för HTML-koden vilka koordinater som ska användas för länken.
Bilder som används för Internet mäts i pixlar. Att veta hur många pixlar som finns i bilden är det första viktiga steget för att skapa en bildkarta. Till exempel används en rektangulär bild som har en höjd på 400 pixlar och en bredd på 250 pixlar. Därefter måste programmeraren veta hur man exakt mäter formen i koordinater för att HTML-bildkartan ska fungera korrekt.
Det övre vänstra hörnet kallas 0,0 när du använder en HTML-bildkarta. Det nedre högra hörnet i det här fallet skulle vara 250,400 10. Måtten görs med bredden först och sedan höjden. Ett enkelt sätt att tänka på det är att den första mätningen talar om för HTML-koden hur långt till höger den ska gå från den vänstra kanten och den andra är hur den talar om hur många pixlar som ska gå. Om programmeraren vill att en punkt på kartan ska vara 50 pixlar från vänsterkanten och 10,50 pixlar nedåt, skulle koordinaterna vara XNUMX.
Det finns tre olika former som programmeraren kan anropa för en HTML-bildkarta: rekt, cirkel och polygon. ”Rect” står för rektangel, och programmeraren måste först skriva in koordinaterna för det övre vänstra hörnet och sedan det nedre högra hörnet. En cirkel specificeras genom att skriva koordinaterna där cirkeln börjar, och sedan cirkelns radie. En polygon skapas genom att skriva in alla fem koordinaterna, från toppen till höger.
HTML-bildkartas kodning går så här:
Varje HTML-bildkarta måste ha ett namn, och avsnittet ”url.html” är länken dit avsnittet av bildkartan leder en användare när han eller hon klickar på den. När bilden placeras på webbplatsen med HTML måste programmeraren skriva: usemap=”test.” Detta kommer att tala om för bilden vilken HTML-bildkarta som ska användas.