Hur man skapar en bildkarta med Gimp: 10 steg (med bilder)

Innehållsförteckning:

Hur man skapar en bildkarta med Gimp: 10 steg (med bilder)
Hur man skapar en bildkarta med Gimp: 10 steg (med bilder)

Video: Hur man skapar en bildkarta med Gimp: 10 steg (med bilder)

Video: Hur man skapar en bildkarta med Gimp: 10 steg (med bilder)
Video: Illustrator Tutorial: Placing Images 2024, Maj
Anonim

En bildkarta är en bild med "mappade" webbadresser på den. Du kan klä upp din webbplats eller din personliga startsida med en bildkarta med dina favoritsajter som du gillar att besöka. Det finns mycket programvara som du kan göra det, men den här artikeln kommer att använda Gimp.

Steg

Skapa en bildkarta med hjälp av Gimp Steg 1
Skapa en bildkarta med hjälp av Gimp Steg 1

Steg 1. Sätt ihop en första grafik som du ska kartlägga

Du kan använda bilder, bilder, allt som fungerar för dig. Här kommer vi att använda wikiHow, wikiHow forum och iGoogle.

Skapa en bildkarta med hjälp av Gimp Steg 2
Skapa en bildkarta med hjälp av Gimp Steg 2

Steg 2. När du har skapat bilden, (eller öppnat den), går du till Filter >> Webb >> ImageMap

Dialogrutan Gimp ImageMap

Skapa en bildkarta med hjälp av Gimp Steg 3
Skapa en bildkarta med hjälp av Gimp Steg 3

Steg 3. Klicka på rektangeln till höger på skärmen och välj sedan en av de bilder som du vill använda

I denna skärmdump väljs wikiHow. Fyll i nödvändig information i dialogrutan som visas.

Klicka på rektangeln så kan du se den exakta platsen för grafiken

Skapa en bildkarta med hjälp av Gimp Steg 4
Skapa en bildkarta med hjälp av Gimp Steg 4

Steg 4. Fortsätt denna process för resten av din karta

Skapa en bildkarta med hjälp av Gimp Steg 5
Skapa en bildkarta med hjälp av Gimp Steg 5

Steg 5. När du har definierat alla länkområden, spara din bildkarta

GIMP erbjuder automatiskt att spara detta som en fil med ett.map -tillägg. Om du vill kan du spara det som det. Men den här filen innehåller HTML -koden (inga bilder) som vi behöver redigera och kopiera över till vår egen webbsida, så det rekommenderas att du sparar den som [filnamn].html och hoppar direkt till steg 7.

Skapa en bildkarta med hjälp av Gimp Steg 6
Skapa en bildkarta med hjälp av Gimp Steg 6

Steg 6. Om du inte har sparat den som en HTML -fil hittar du den sparade filen och byter namn på tillägget till.html

Du kan få en varning om att ändra filtillägg. Klicka på ja för att fortsätta.

Skapa en bildkarta med hjälp av Gimp Steg 7
Skapa en bildkarta med hjälp av Gimp Steg 7

Steg 7. Använd en textredigerare för att öppna denna HTML -fil

Du kommer att märka att den här filen helt enkelt innehåller en lista över koordinater och webbadresser. Detta är koden som berättar för en webbläsare vilka webbadresser som ska tilldelas vilken del av din bild.

Skapa en bildkarta med hjälp av Gimp Steg 8
Skapa en bildkarta med hjälp av Gimp Steg 8

Steg 8. Se till att filvägen som definieras i

Image
Image

länkar till bilden som du vill att mapparna ska mappas till.

Om du inte pekar rätt på bilden kan det leda till att ingen bild visas alls.

Steg 9. VALFRITT:

Använd en webbläsare för att öppna din HTML -fil; om allt fungerar bör du se bilden med alla webbadresser mappade på den enligt de områden du definierade.

Skapa en bildkarta med hjälp av Gimp Steg 10
Skapa en bildkarta med hjälp av Gimp Steg 10

Steg 10. Lägg till din bildkarta i din webbsides HTML

Du måste kopiera ALLA kodrader du ser, inklusive

tag (som definierar sökvägen till din källbild) och allt mellan taggarna. Det är allt! Du är klar.

Rekommenderad: