Det fanns en punkt i webbdesignens historia där många webbplatser använde en funktion som kallas "bildkartor". Detta är en lista över koordinater kopplade till en viss bild på en sida. Dessa koordinater skapar hyperlänksområden på den bilden. Det är viktigt att lägga till "hot spots" i en grafik, som alla kan kodas för att länka till olika platser. Det här är mycket annorlunda än att bara lägga till en länktagg till en bild, vilket skulle göra att hela grafiken blir en stor länk till ett enda resmål.
Exempel: Tänk dig att ha en grafisk fil med en bild av USA. Om du vill att varje stat ska vara "klickbar" så att de går till sidor om den specifika staten, kan du göra det med en bildkarta. På samma sätt, om du hade en bild av ett musikband, kan du använda en bildkarta så att varje enskild medlem kan klickas till en senare sida om den bandmedlemmen.
Ljuda bildkartor bra? De var verkligen, men de har fallit i favör på dagens webb. Detta är, åtminstone delvis, eftersom bildkartor kräver specifika koordinater att fungera. Webbplatser idag är byggda för att vara mottagliga och bilder skalas baserat på storleken på en skärm eller enhet. Det innebär att förinställda koordinater, vilket är hur bilderna kartor fungerar, faller isär när en webbplats vågar och bilderna ändrar storlek. Därför brukar bildkartor sällan användas på produktionssidor idag, men de har fortfarande fördelar med demo eller instanser där du tvingar storleken på en sida.
Vill du veta hur man skapar en bildkarta, specifikt hur man gör det med Dreamweaver? Processen är inte särskilt svår, men det är inte lätt heller, så du borde ha lite erfarenhet innan du börjar.
Komma igång
Låt oss börja. Det första steget du behöver ta är att lägga till en bild på din webbsida. Du klickar sedan på bilden för att markera den. Därifrån måste du gå till egenskapsmenyn (och klicka på ett av de tre hotspot-ritverktygen: rektangel, cirkel eller polygon. Glöm inte att namnge din bild, som du kan göra i egenskapsfältet. Du kan namnge Det är vad du vill. Använd "karta" som ett exempel.
Dra nu den form du vill ha på din bild med hjälp av ett av dessa verktyg. Om du behöver rektangulära fläckar, använd rektangeln. Samma för cirkeln. Om du vill ha mer komplexa hotspot-former, använd polygonen. Detta är vad du skulle troligen använda i exemplet på den amerikanska kartan eftersom polygonen skulle låta dig släppa poäng och skapa väldigt komplexa och oregelbundna former på bilden
I egenskapsfönstret för hotspot skriver du in eller bläddrar till den sida som hotspot ska länka. Det här skapar det länkbara området. Fortsätt lägga till hotspots tills din karta är klar och alla länkar du vill lägga till har lagts till.
När du är klar, granska din bildkarta i en webbläsare för att se till att den fungerar korrekt. Klicka på varje länk för att säkerställa att den går till rätt resurs eller webbsida.
Nackdelar med bildkartor
Återigen, var medveten om att bildkartor har flera nackdelar, även utanför den ovan nämnda bristen på stöd med mottagliga webbplatser. Först kan små detaljer vara dolda i en bildkarta. Till exempel kan geografiska bildkartor hjälpa till att avgöra vilken kontinent en användare är från, men dessa kartor är kanske inte tillräckligt detaljerade för att ange användarens ursprungsland. Det betyder att en bildkarta kan bidra till att avgöra om en användare är från Asien men inte särskilt från Kambodja.
Bildkartor kan också laddas långsamt. De ska inte användas flera gånger på en webbplats eftersom de upptar för mycket utrymme att användas på varje sida på en webbplats. För många bildkartor på en enda sida skulle skapa en allvarlig flaskhals och en enorm inverkan på webbplatsens prestanda.
Slutligen kan bildkartor inte vara enkla för användare med visuella problem att komma åt. Om du använde bildkartor, bör du också skapa ett annat navigationssystem för dessa användare som ett alternativ.
Slutsats
Använd bildkartor från tid till annan när du försöker sätta ihop en snabb demo av en design och hur den fungerar. Om du till exempel mockar upp en design för en mobilapp och du vill använda bildkartor för att skapa hotspots för att simulera appens interaktivitet. Det här är mycket lättare att göra än att det skulle vara att koda appen, eller till och med bygga dummywebbsidor byggda enligt nuvarande standarder med HTML och CSS. Men att lägga dem till en produktionsplats eller app är mycket knepigt och borde sannolikt undvikas på dagens hemsidor.
