Du kan ikke oprette et interaktivt billedkort direkte i Adobe Illustrator. Billedkort bruges til at definere klikbare områder inden for et billede, normalt til at navigere i et websted, og de kræver et backend -sprog som HTML og JavaScript for at fungere.

Du kan dog forberede billedet og definere klikbare områder I Illustrator, som du derefter kan bruge i din webkode:

1. Forbered dit billede i Illustrator:

* Åbn dit billede i Illustrator.

* Sørg for, at det er i den ønskede størrelse og opløsning for dit websted.

* Vectorize billedet: Dette gør det skalerbart uden at miste kvalitet. Du kan gøre dette ved at bruge funktionen Image Trace (Window> Image Trace).

* gruppe Alle elementer: Vælg alle elementerne i dit billede, og grupperer dem (objekt> gruppe) for at holde dem sammen.

2. Definer de klikbare områder:

* Brug Pen Tool (P) eller formværktøjer: Sådan oprettes præcise former til dine klikbare områder.

* Opret et nyt lag: Dette hjælper med at organisere dine billedkortelementer.

* Tegn formene oven på dit billede: Sørg for, at formerne er klart defineret og svarer til de områder, du vil gøre klikbar.

* Navngiv dine former: Dette vil være nyttigt, når du skriver din HTML -kode. Brug meningsfulde navne, der beskriver området, f.eks. "Produkt-1", "om-os", "kontaktform" osv.

3. Eksporter billedet og formerne:

* Eksporter billedet som en PNG eller JPG: Dette vil være dit hovedbillede på dit websted.

* Eksporter formerne som en SVG -fil: Dette vil indeholde oplysningerne om dine klikbare områder.

4. Opret HTML- og JavaScript -koden:

* I din HTML -fil skal du tilføje billedmærket til dit eksporterede billede.

* Brug `kort 'og` areal' tags til at definere de klikbare områder. Attributten 'form' definerer typen af ​​form (rekt, cirkel, poly) og attributten 'Koords' definerer koordinaterne for din form (se SVG -filen for disse værdier). Attributten 'href' forbinder området til en bestemt URL.

* For mere komplekse interaktioner skal du muligvis bruge JavaScript til at håndtere klik på billedkortet.

Eksempel HTML:

`` `html

`` `

Husk: Den nøjagtige kode afhænger af dine specifikke behov og de webrammer, du bruger. Der er også forskellige online billedkortværktøjer, der kan forenkle processen.

Denne proces giver dig mulighed for at oprette et billedkort i Illustrator, som du derefter kan bruge i din webkode, hvilket gør dine billeder interaktive til dine besøgende på webstedet.