Hur skapar jag en HTML Image Map?

När en länk läggs till en bild i Hypertext Markup Language (HTML), är den som länk läggs 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 låter programmeraren att ange vissa områden där länken kommer att gå, att låta honom eller henne att bädda flera länkar i en bild. Detta görs genom att ange en form för länken och berätta 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 är i bilden är det första viktiga steget att skapa ett bildschema. Till exempel är en rektangulär bild som används som har en höjd av 400 bildpunkter och en bredd på 250 pixlar. Därefter måste programmeraren att veta hur exakt att mäta form i koordinaterna för HTML bild kartan för att fungera korrekt.

Den övre vänstra hörnet kallas 0,0 vid användning av en HTML-bildkartan. Den nedre högra hörnet i detta fall skulle vara 250.400. Mätningarna 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 är träffande HTML hur långt åt höger för att gå från den vänstra kanten och den andra är hur du anger hur många bildpunkter ner för att gå. Om programmeraren vill ha en punkt på kartan för att vara 10 pixlar från vänsterkanten och 50 pixlar nedåt, skulle koordinaterna vara 10,50.

Det finns tre olika former programmeraren kan åberopa för en HTML bildkarta: rekt, cirkel och polygon. "Rect" står för rektangeln, och programmeraren måste först skriva koordinaterna för det övre vänstra hörnet och sedan längst ner till höger. En cirkel är specificerad genom att skriva koordinaterna där cirkeln börjar, och sedan radie av en cirkel. En polygon skapas genom att skriva in alla fem koordinater, från toppen till höger.

HTML bildkarta kodning går så här: <karta name = "test">
<område href = "url.html" form = rect koordinater = "10,50,20,60">
<område href = "url.html" form = cirkel koordinater = "10,50,4">
<område href = "url.html" form = polygon koordinater = "10,50,12,55,15,60,13,65,8,55">

Varje HTML bildkarta måste ha ett namn, och "url.html" avsnittet är länken där den del av bilden kartan kommer att leda en användare när han eller hon klickar på den. När bilden är placerad på hemsidan med HTML, måste programmeraren skriver: usemap = "test". Detta kommer att berätta bilden vad HTML bildkartan att använda.

  • När bilden är placerad på hemsidan med HTML, måste programmeraren skriver: usemap = "test".