Hur skapar jag en HTML-bildkarta?

När en länk läggs till i en bild i Hypertext Markup Language (HTML) läggs den länken till hela bilden. Detta kan vara ett problem om programmeraren vill skapa en enda bild med flera områden eller knappar och varje område används för en annan länk. En HTML-bildkarta gör att programmeraren kan ange 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 berätta för HTML 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 av 400 pixlar och en bredd av 250 pixlar. Därefter måste programmeraren veta hur man korrekt mäter formen i koordinater för att HTML-bildkartan ska fungera korrekt.

Det övre vänstra hörnet kallas 0,0 när man använder en HTML-bildkarta. Det nedre högra hörnet i detta fall skulle vara 250 400. Mätningarna görs först med bredden och sedan höjden. Ett enkelt sätt att tänka på det är att den första mätningen berättar HTML hur långt till höger man ska gå från vänster kant och den andra är hur man berättar hur många pixlar som ska gå ner. Om programmeraren vill att en punkt på kartan ska vara 10 pixlar från vänster kant och 50 pixlar ner, skulle koordinaterna vara 10,50.

Det finns tre olika former som programmeraren kan åberopa 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 längst ner till höger. En cirkel specificeras genom att ange koordinaterna där cirkeln börjar och sedan cirkelns radie. En polygon skapas genom att skriva in alla fem koordinaterna, uppifrån till höger.

Kodning för HTML-bildkarta går så här:
<map name = "test">
<område href = "url.html" shape = rect coords = "10,50,20,60">
<område href = "url.html" form = cirkelsträng = "10,50,4">
<område href = "url.html" form = polygonkord = "10,50,12,55,15,60,13,65,8,55">

Varje HTML-bildkarta måste ha ett namn, och avsnittet "url.html" är länken där det avsnittet på 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 visar bilden vilken HTML-bildkarta som ska användas.