Saltar al contenido

Hur man bygger bildkartor utan en bildkartredigerare

18 de julio de 2021
GettyImages 671337433 5a5fcd8cb39d030037c056e8 95888c8eb197432da3599272e54635c2

Vad du ska veta

• Använd en bild i normal storlek som webbläsaren inte omskalar. Du behöver också en bildredigerare och en HTML- eller textredigerare. • När du sätter in bilden, lägg till ett extra attribut för att identifiera kartans koordinater. • Till exempel:

Den här artikeln förklarar hur du skapar bildkartor med HTML-taggar istället för en bildkartredigerare. De flesta bildredigerare visar koordinaterna för din mus när du pekar på bilden, vilket är all information du behöver för att komma igång med bildkartor.

karta med stift och garn fastnat i den

Skapa en bildkarta

För att skapa en bildkarta, välj först en bild som ska ligga till grund för kartan. Bilden ska ha «normal storlek» – det vill säga du ska inte använda en bild så stor att webbläsaren skalar den. När du sätter in bilden lägger du till ett extra attribut som identifierar kartans koordinater:

class = «ql-syntax»> När du skapar en bildkarta skapar du ett område som kan klickas på bilden, så kartans koordinater måste stämma överens med höjden och bredden på den bild du valt. Kartor stöder tre olika typer av former:

  • rekt – en rektangel eller fyrsidig figur
  • poly — en polygon eller flersidig figur
  • cirkel – en cirkel

För att skapa områdena måste du isolera de specifika koordinaterna du tänker kartlägga. En karta kan bestå av ett eller flera definierade områden på bilden som, när de klickas, öppnar en ny hyperlänk. För en rektangel, du kartlägger bara det övre vänstra och nedre högra hörnet. Alla koordinater är listade som x, y (över, upp). Så för det övre vänstra hörnet 0,0 och det nedre högra hörnet 10,15 skulle du skriva 0,0,10,15. Du tar det sedan med på kartan:

class = «ql-syntax»>

För en polygon, du kartlägger var och en x, y samordna separat. Webbläsaren ansluter automatiskt den sista uppsättningen koordinater med den första; allt i dessa koordinater är en del av kartan.


class = «ql-syntax»>

Cirkel former kräver bara två koordinater, som rektangeln, men för den andra koordinaten anger du radien eller avståndet från centrum av cirkeln. Så, för en cirkel med centrum vid 122,122 och en radie av 5 skulle du skriva 122,122,5:

class = «ql-syntax»>

Alla områden och former kan ingå i samma kartmärke:


class = «ql-syntax»>

Överväganden

Bildkartor var mycket vanligare under Web 1.0-eran på 1990-talet till mycket tidiga 2000-talet – bildkartor låg ofta till grund för en webbplatss navigering. En designer skulle skapa någon form av bild för att ange menyalternativ och sedan ställa in en karta. Moderna tillvägagångssätt uppmuntrar responsiv design och använder kaskadformat för att styra placeringen av bilder och hyperlänkar på en sida. Även om karttaggen fortfarande stöds i HTML-standarden kan användningen av mobila enheter med små formfaktorer leda till oväntade prestandaproblem med bildkartor. Dessutom får bandbreddsproblem eller trasiga bilder värden på en bildkarta. Så gärna fortsätt använda denna stabila, välförstått teknik – med vetskapen om att det finns effektivare alternativ för närvarande en vogue med webbdesigners.