Vad att veta
• Använd en bild i normal storlek som webbläsaren inte kan skala om. Du behöver också en bildredigerare och en HTML- eller textredigerare.
• När du infogar 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 dig koordinaterna för din mus när du pekar i bilden, vilket är all data du behöver för att komma igång med bildkartor.
Skapa en bildkarta
För att skapa en bildkarta, välj först en bild som kommer att fungera som grund för kartan. Bilden ska vara "normalstorlek" - det vill säga du ska inte använda en bild så stor att webbläsaren kommer att skala den.
När du infogar bilden lägger du till ett extra attribut som identifierar kartans koordinater:
När du skapar en bildkarta skapar du ett område som är klickbart på bilden, så kartans koordinater måste överensstämma med höjden och bredden på bilden du v alt. 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 den klickas, öppnar en ny hyperlänk.
För en rektangel mappar du bara de övre vänstra och nedre högra hörnen. Alla koordinater listas 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 inkluderar sedan den på kartan:
För en polygon mappar du varje x, y-koordinat separat. Webbläsaren kopplar automatiskt samman den sista uppsättningen koordinater med den första; allt inom dessa koordinater är en del av kartan.
Cirkelformer kräver bara två koordinater, som rektangeln, men för den andra koordinaten anger du radien eller avståndet från cirkelns mittpunkt. Så för en cirkel med mitten på 122, 122 och en radie på 5 skulle du skriva 122, 122, 5:
Alla områden och former kan inkluderas i samma karttagg:
Overväganden
Bildkartor var mycket vanligare under Web 1.0-eran på 1990-talet till början av 2000-talet. Bildkartor utgjorde ofta grunden för en webbplatss navigering. En designer skulle skapa någon sorts bild för att indikera meny alternativ och sedan sätta en karta.
Moderna tillvägagångssätt uppmuntrar responsiv design och använder kaskadformatmallar 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 kan bandbreddsproblem eller trasiga bilder diskutera värdet av en bildkarta.
Så, fortsätt gärna använda denna stabila, välförstådda teknik, eftersom du vet att det finns mer effektiva alternativ för närvarande på modet med webbdesigners.
