Sie können keine interaktive Bildkarte direkt im Adobe -Illustrator erstellen. Bildkarten werden verwendet, um klickbare Bereiche in einem Bild zu definieren, normalerweise zum Navigieren einer Website, und für die Funktion einer Backend -Sprache wie HTML und JavaScript.
Sie können jedoch das Bild vorbereiten und klickbare Bereiche definieren In Illustrator, die Sie dann in Ihrem Webcode verwenden können:
1. Bereiten Sie Ihr Bild in Illustrator vor:
* Öffnen Sie Ihr Bild in Illustrator.
* Stellen Sie sicher, dass es sich bei der gewünschten Größe und Auflösung für Ihre Website befindet.
* Vektorisieren Sie das Bild: Dies macht es skalierbar, ohne Qualität zu verlieren. Sie können dies mit der Bildverfolgungsfunktion (Fenster> Bildverfolgung) tun.
* Gruppe alle Elemente: Wählen Sie alle Elemente in Ihrem Bild aus und gruppieren Sie sie (Objekt> Gruppe), um sie zusammenzuhalten.
2. Definieren Sie die klickbaren Bereiche:
* Verwenden Sie das Stiftwerkzeug (P) oder Formwerkzeuge: Um präzise Formen für Ihre klickbaren Bereiche zu erstellen.
* Erstellen Sie eine neue Ebene: Dies hilft, Ihre Bildkartenelemente zu organisieren.
* Zeichnen Sie die Formen über Ihr Bild: Stellen Sie sicher, dass die Formen klar definiert sind und den Bereichen entsprechen, die Sie anklicken möchten.
* Nennen Sie Ihre Formen: Dies ist nützlich, wenn Sie Ihren HTML -Code schreiben. Verwenden Sie sinnvolle Namen, die den Bereich beschreiben, z. B. "Produkt-1", "über-US", "Kontaktform" usw.
3. Exportieren Sie das Bild und die Formen:
* Das Bild als PNG oder JPG exportieren: Dies ist Ihr Hauptbild auf Ihrer Website.
* Die Formen als SVG -Datei exportieren: Dies enthält die Informationen zu Ihren klickbaren Bereichen.
4. Erstellen Sie den HTML- und JavaScript -Code:
* Fügen Sie in Ihrer HTML -Datei das Bild -Tag für Ihr exportiertes Bild hinzu.
* Verwenden Sie die Tags "Map" und "Area", um die klickbaren Bereiche zu definieren. Das Attribut "Shape" definiert die Formtyp (Rechte, Kreis, Poly) und das Attribut "Coords" definiert die Koordinaten Ihrer Form (siehe SVG -Datei für diese Werte). Das `href`attribut verknüpft den Bereich mit einer bestimmten URL.
* Für komplexere Interaktionen müssen Sie möglicherweise JavaScript verwenden, um die Klicks auf der Bildkarte zu verarbeiten.
Beispiel HTML:
`` `html
`` `
Denken Sie daran: Der genaue Code hängt von Ihren spezifischen Anforderungen und dem von Ihnen verwendeten Web -Framework ab. Es gibt auch verschiedene Online -Image -Karten -Tools, die den Prozess vereinfachen können.
Mit diesem Vorgang können Sie eine Bildkarte in Illustrator erstellen, die Sie dann in Ihrem Webcode verwenden können, um Ihre Bilder für Ihre Website -Besucher interaktiv zu gestalten.