Du kan inte skapa en interaktiv bildkarta direkt i Adobe Illustrator. Bildkartor används för att definiera klickbara områden i en bild, vanligtvis för att navigera i en webbplats, och de kräver ett backend -språk som HTML och JavaScript för att fungera.
Du kan dock förbereda bilden och definiera klickbara områden I illustratör som du sedan kan använda i din webbkod:
1. Förbered din bild i Illustrator:
* Öppna din bild i illustratören.
* Se till att det är i önskad storlek och upplösning för din webbplats.
* vektorize bilden: Detta gör det skalbart utan att förlora kvaliteten. Du kan göra detta genom att använda bildspårfunktionen (Window> Image Trace).
* grupp alla element: Välj alla element i din bild och gruppera dem (objekt> grupp) för att hålla dem tillsammans.
2. Definiera de klickbara områdena:
* Använd pennverktyget (P) eller formverktyg: För att skapa exakta former för dina klickbara områden.
* Skapa ett nytt lager: Detta hjälper till att organisera dina bildkartelement.
* Rita formerna ovanpå din bild: Se till att formerna är tydligt definierade och motsvarar de områden du vill göra klickbara.
* Namnge dina former: Detta kommer att vara användbart när du skriver din HTML -kod. Använd meningsfulla namn som beskriver området, t.ex. "Produkt-1", "Om oss", "kontaktform", etc.
3. Exportera bilden och formerna:
* exportera bilden som en PNG eller JPG: Detta kommer att vara din huvudbild på din webbplats.
* Exportera formerna som en SVG -fil: Detta kommer att innehålla informationen om dina klickbara områden.
4. Skapa HTML- och JavaScript -koden:
* I din HTML -fil, lägg till bildtaggen för din exporterade bild.
* Använd taggarna "Map" och "Area" för att definiera de klickbara områdena. Attributet "form" definierar typen av form (rekt, cirkel, poly) och "koords" -attributet definierar koordinaterna för din form (se SVG -filen för dessa värden). Attributet "HREF" länkar området till en specifik URL.
* För mer komplexa interaktioner kan du behöva använda JavaScript för att hantera klick på bildkartan.
Exempel HTML:
`` `html
`` `
Kom ihåg: Den exakta koden beror på dina specifika behov och webbramen du använder. Det finns också olika online -bildkartverktyg som kan förenkla processen.
Den här processen låter dig skapa en bildkarta i illustratören som du sedan kan använda i din webbkod, vilket gör dina bilder interaktiva för dina webbplatsbesökare.
