DokumentationAEMHandbuch zu Dynamic Media Classic

Imagemaps erstellen creating-image-maps

Letzte Aktualisierung: 14. Mai 2026

Erstellt für:

  • {"id":"b5a62a22-46f7-4f0d-b151-3fc640bef588"}
  • {"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"}

Eine Imagemap ist ein Bereich auf einem Bild, einer E-Katalog-Seite oder einem Bild in einem Rotationsset, das ein Rollover-Bedienfeld mit Text anzeigt. Wenn der/die Benutzende eine Imagemap auswählt, wird eine Aktion irgendeiner Art ausgelöst. Beispielsweise wird eine Web-Seite gestartet, auf der Benutzende mehr über ein Produkt erfahren können. Um eine Imagemap wird ein Umriss angezeigt, wenn der Benutzer den Mauszeiger darüber bewegt.

Neben der Möglichkeit, Imagemaps in Adobe Dynamic Media Classic zu erstellen, können Sie beim Entwerfen eines Katalogs in Adobe Acrobat oder Adobe InDesign auch Imagemaps erstellen.

Beim Erstellen von Imagemaps haben Sie folgende Möglichkeiten:

  • Rollover-Text eingeben
  • Geben Sie JavaScript und URLs für den Start von Web-Seiten ein.
  • URL-Vorlagen für Imagemaps erstellen
  • Kopieren Sie Imagemaps in andere Bilder, E-Katalog-Seiten oder Rotationssets.
  • Imagemaps in CSV- oder XML-Dateien exportieren
  • Importieren Sie Bildmetadaten aus einer tabulatorgetrennten Datei oder aus einer XML-Datei.
  • Andere vom W3C (World Wide Web Consortium) festgelegte Aktionen definieren
  • Vorschau der Imagemaps anzeigen

Zeichnen und Anpassen einer Imagemap drawing-and-adjusting-an-image-map

  1. Führen Sie einen der folgenden Schritte aus:

    • Wenn Sie mit einem Bild in der Raster- oder Listenansicht arbeiten, wählen Sie Imagemap aus der Dropdown-Liste Bearbeiten aus. Oder öffnen Sie es in der Detailansicht und wählen Sie dann Imagemap über dem Bild aus.
    • Wenn Sie mit einem Rotationsset in der Rasteransicht oder Listenansicht arbeiten, wählen Sie Bearbeiten. Oder öffnen Sie es in der Detailansicht und wählen Sie dann Bearbeiten aus. Wählen Sie ein Bild-Asset aus und klicken Sie auf Imagemap.
    • Wenn Sie mit einem E-Katalog in der Raster-, Listen- oder Detailansicht arbeiten, wählen Sie Bearbeiten aus. Wählen Sie die Seiten zuordnen aus.

    Imagemap-Illustration

  2. Sie können eine rechteckige oder polygonale Imagemap zeichnen:

    • Rechteckige Karte: Wählen Sie das Rechteck-Imagemap-Werkzeug aus und ziehen Sie auf die Seite, um das Rechteck zu erstellen. Drücken Sie zum Hinzufügen eines Punkts zu einer rechteckigen Karte (und damit zu einer Polygonzuordnung) die Strg-Taste, platzieren Sie das Einfügewerkzeug an der gewünschten Position und wählen Sie.

    • Polygonkarte: Wählen Sie das Werkzeug Polygon-Imagemap und wählen Sie Punkte auf dem Umfang des Bereichs des Bildes aus, den Sie einschließen möchten. Verwenden Sie den Regler für die Dichte des Polygons, um die Punktdichte im Polygon zu ändern. Die ursprüngliche Dichte wird wiederhergestellt, wenn Sie andere Maps auswählen. Wenn ein Punkt im Polygon hinzugefügt, gelöscht oder verschoben wird, geht die ursprüngliche Dichte verloren. Der Schieberegler wird auf seinen Maximalwert zurückgesetzt.

  3. Geben Sie optional in der Imagemap-Liste einen Namen für die Imagemap ein. Nachdem Sie eine Imagemap gezeichnet haben, weist Adobe Dynamic Media Classic ihr einen Namen zu.

    Um den Namen zu erstellen, hängt Adobe Dynamic Media Classic eine sequenzielle Nummer an den Namen des Bildes oder der E-Katalog-Seite an, mit dem bzw. der Sie arbeiten. Sie können jedoch auch einen Namen Ihrer Wahl eingeben.

  4. Wenn Benutzerinnen und Benutzer eine neue Web-Seite öffnen sollen, wenn sie auf die Imagemap klicken, geben Sie die URL in die Liste „Imagemap“ ein.

    Siehe Eingeben von JavaScript und URLs.

  5. Wenn Rollover-Text angezeigt werden soll, sobald die Benutzer den Mauszeiger über die Imagemap bewegen, geben Sie den Text in der Imagemap-Liste ein. Wählen Sie in der Liste „Imagemap“ das Menü Anzeigen und dann Rollover-Text aus. Geben Sie dann den Text ein, der Benutzern auf dem Bildschirm angezeigt werden soll. Sie können den Text in einem Textverarbeitungsprogramm schreiben und in das Feld „Rollover-Text“ kopieren.

  6. Sie können auch eine andere Aktion definieren, die ausgeführt werden soll, wenn die Benutzer den Mauszeiger über die Imagemap bewegen. Wählen Sie in Dropdown Liste „Anzeigen“ die Option Andere Aktionen. Geben Sie die Attribute der Aktion ein. (Gehen Sie zu Anzeigen > Beide, um Rollover-Text und eine Aktion für eine Imagemap zu erstellen.)

    Siehe Definieren anderer Aktionen für Imagemaps.

  7. (Optional) Führen Sie dann einen der folgenden Schritte aus:

    • Um Imagemaps in der Vorschau anzuzeigen, wählen Sie Vorschau aus.

    • Um eine Imagemap oder einen Polygonscheitelpunkt zu löschen, wählen Sie eine Form im Bild aus und klicken Sie dann auf Löschen. Oder wählen Sie für einen E-Katalog auf der Registerkarte Bestellseiten die Option Karten löschen, um Imagemaps aus allen Seiten zu entfernen.

    • So entfernen Sie Folgendes

      • Imagemap aus einem Bild
      • ein Bild in einem Rotationsset
      • oder eine E-Katalog-Seite

      Deaktivieren Sie vorübergehend die entsprechende Option Ein in der Imagemap-Liste, ohne sie zu löschen.

  8. Wählen Sie Speichern aus.

Anpassen von Position, Form und Größe von Imagemaps adjusting-the-position-shape-and-size-of-image-maps

Um die Position, Form und Größe einer Imagemap zu ändern, klicken Sie auf die Schaltfläche Imagemap . Wählen Sie anschließend das Pan-Tool aus und befolgen Sie die folgenden Anweisungen:

  • Position ändern: Bewegen Sie den Mauszeiger in der Nähe des Rahmens der Imagemap, aber nicht über diesen. Wenn Sie das Symbol Verschieben sehen, ziehen Sie die Karte an eine neue Position.

  • Ändern der Größe und Form: Wie Sie die Form und Größe einer Imagemap ändern, hängt davon ab, ob Sie mit einer rechteckigen oder polygonalen Imagemap arbeiten:

TIP
Um die Ansichten zu ändern und Ihre Imagemap klarer anzuzeigen, ziehen Sie den Größenregler am unteren Bildschirmrand.

  • Rechteckige Imagemap: Bewegen Sie den Mauszeiger über eine Seite oder Ecke der Imagemap. Wenn der Mauszeiger als Doppelpfeil dargestellt wird, ziehen Sie mit der Maus. Um die Größe zu ändern, aber das Seitenverhältnis (die Form) beizubehalten, halten Sie beim Ziehen die Umschalttaste gedrückt.

  • Polygonale Imagemap: Ziehen Sie einen quadratischen Auswahlpunkt. Um einen Auswahlpunkt zu erstellen, wählen Sie den Rahmen der Imagemap aus und beginnen Sie mit dem Ziehen.

Überlappende Imagemaps behandeln handling-overlapping-image-maps

Wenn Ihre Bild- oder E-Katalog-Seite mehr als eine Imagemap enthält und sich die Karten überschneiden, können Sie bestimmen, wie sich die Karten überschneiden. Ändern Sie dazu in der Imagemap-Liste die Reihenfolge der Imagemaps. Ziehen Sie die Namen zu einer höheren oder niedrigeren Position in der Liste. Die Imagemaps an höheren Positionen überlagern die Imagemaps an niedrigeren Positionen in der Liste.

Importieren von Imagemap-Daten importing-image-map-data

Anstatt die Imagemap-Daten auf jeder Seite einzugeben, können Sie die Daten für Ihr Bild, Ihr Rotationsset oder Ihren E-Katalog in den Bildschirm „Map-Zusammenfassung“ importieren. Die Imagemap-Daten werden in Form einer tabulatorgetrennten oder XML DTD-Datei importiert. Die Felder in Ihrer Datei müssen der Reihenfolge entsprechen, die im Bildschirm „Zuordnungszusammenfassung“ angezeigt wird: Name, Inhaltsverzeichnisbeschriftungen, Zuordnungen, URLs, Rollover-Text, andere Aktionen und Suchzeichenfolgen. Durch den Import von Imagemap-Daten müssen Sie die Daten nicht in die Imagemap-Liste eingeben, während Sie jede Imagemap erstellen.

So importieren Sie Imagemap-Daten:

  1. Gehen Sie zur Seite „Imagemap-Editor“ (für Bilder oder Bilder in Rotationssets) oder zur Registerkarte „Imagemap-Seiten“ im Bearbeitungsbildschirm für E-Kataloge.
  2. Wählen Sie Metadaten importieren aus.
  3. Wählen Sie im Dialogfeld Metadaten hochladen die Option Bild oder Imagemap aus, um die Metadaten aus dem gewünschten Asset-Eigenschaftstyp hochzuladen.
  4. Wählen Sie in der Dropdown-Liste Generate File den Dateityp aus, den Sie erstellen möchten.
  5. (Optional) Wählen Sie Generieren aus. Dadurch wird eine Vorschau der resultierenden Daten basierend auf dem Dateityp angezeigt, den Sie erstellen möchten. Wählen Sie Schließen aus, um zum Dialogfeld „Metadaten hochladen“ zurückzukehren.
  6. Navigieren Sie zu der Datei, die Sie hochladen möchten. Geben Sie im Textfeld „Dateiname“ den Namen der erstellten Datei an.
  7. (Optional) Geben Sie im Feld „Auftragsname“ einen Namen für den Auftrag „Metadaten hochladen“ ein.
  8. Wählen Sie Hochladen aus.

Kopieren von Imagemaps copying-image-maps

Sie können Imagemaps zwischen Bildern und E-Katalogseiten kopieren. Verwenden Sie Imagemap kopieren um den Erstellungsprozess zu vereinfachen. Um Imagemaps in Bildern oder Seiten zu erstellen, die Layout- oder Zuordnungsstruktur gemeinsam haben, können Sie sie auch kopieren.

Das Kopieren von Imagemaps in einem E-Katalog ist beispielsweise eine praktische Methode, um alle Imagemaps zwischen verschiedenen Sprachversionen desselben E-Katalogs zu kopieren. Um optimale Ergebnisse zu erzielen, ist das Kopieren am erfolgreichsten, wenn Sie zwischen E-Katalogen mit derselben Seitenanzahl und denselben Bildern kopieren. Wenn der E-Katalog, in den Sie kopieren, bereits Imagemaps enthält, werden diese beim Erstellen der Kopie gelöscht.

So kopieren Sie Imagemaps:

  1. Gehen Sie zur Seite „Imagemap-Editor“ (für Bilder oder Bilder in Rotationssets) oder zur Registerkarte „Imagemap-Seiten“ im Bearbeitungsbildschirm für E-Kataloge.

  2. Wählen Zuordnungen kopieren nach.

  3. Führen Sie einen der folgenden Schritte aus, je nachdem, ob Sie Imagemaps aus Bildern kopieren oder Imagemaps aus einem E-Katalog kopieren:

    • (Bilder) Wählen Sie im Bildschirm „Bilder auswählen“ die Bilder aus, die Sie in die Imagemaps kopieren möchten.
    • (E-Katalog) Wählen Sie im Bildschirm „Asset auswählen“ die Bilder oder E-Katalogseiten aus, die Sie in die Imagemaps kopieren möchten.

  4. Wählen Sie Auswählen aus.

Verwenden einer Vorlage zur Eingabe von JavaScript und URLs using-a-template-to-enter-javascript-and-urls

Um die Eingabe von Imagemap-URLs zu vereinfachen, können Sie eine URL-Vorlage definieren (auch als HREF-Vorlage bezeichnet). Es ist sinnvoll, eine URL-Vorlage zu definieren, wenn die meisten Ihrer Imagemap-URLs ein gemeinsames festes Format haben. Wenn Sie den gleich bleibenden Teil der URL als Vorlage definieren, brauchen Sie diesen Teil beim Erstellen einer neuen Imagemap-URL nicht jedes Mal erneut einzugeben. Ihre URL-Vorlage kann auch JavaScript-Befehle, Pfadnamen und Parameter enthalten. Standardmäßig enthält die URL-Vorlage einen proprietären Adobe Dynamic Media Classic JavaScript-Handler namens loadProduct , der das Bild in einem neuen Fenster öffnet.

NOTE
Wenn Sie den JavaScript-Code zum HREF-Attribut Ihrer Imagemap hinzufügen, wird der Code auf dem Computer des Benutzers verarbeitet. Stellen Sie daher sicher, dass der JavaScript-Code sicher ist.

URL-Vorlagen about-url-templates

Die URL-Vorlage ersetzt den Inhalt der URL-Spalte in der Imagemap-Liste. Sie werden in der Vorlage durch die doppelten Dollarzeichen ($) ersetzt:

Javascript:loadProduct('$$');void(0);

Sie platzieren alle Werte, die sich zwischen Imagemaps nicht ändern, in der URL-Vorlage. Fügen Sie nur die Werte hinzu, die sich zur URL-Spalte in der Imagemap-Liste ändern. Beispiel:

  • URL-Vorlage: javascript:loadProduct('https://www.examplesitehere.com/$$');void(0);
  • URL-Wert: product.htm
  • Tatsächlich generierte URL: javascript:loadProduct('https://www.examplesitehere.com/product.html);void(0);

Standardmäßig enthält die URL-Vorlage einen proprietären Adobe Dynamic Media Classic JavaScript-Handler namens loadProduct , der ein neues Fenster mit dem URL-Ziel öffnet. Sie können jedoch einen beliebigen JavaScript-Code verwenden, um diesen JavaScript-Handler zu ersetzen, oder einen der folgenden Adobe Dynamic Media Classic-Handler verwenden:

  • loadProductCW: Zeigt das URL-Ziel an, das in der URL-Spalte im aktuellen Fenster angegeben ist. Dieser Handler ist hauptsächlich für E-Kataloge vorgesehen, die in eine Seite innerhalb einer Website integriert sind.

  • loadProductPW: Zeigt das URL-Ziel an, das in der URL-Spalte im übergeordneten Fenster angegeben wurde (die Seite, die die aktuelle geöffnet hat). Das aktuelle Fenster bleibt geöffnet, während im übergeordneten Fenster das URL-Ziel angezeigt wird.

    note
    NOTE
    Der Handler loadProductPW unterstützt keine DHTML- und HTML5-Viewer.

Erstellen einer URL-Vorlage creating-a-url-template

  1. Klicken Sie auf dem Bildschirm „Zuordnungs-Editor“ (Bilder oder Rotationssets) oder auf der Registerkarte „Zuordnungsseiten“ des Bildschirms „E-Katalog“ (E-Kataloge) neben der Option URL-Vorlage auf Bearbeiten . Das Dialogfeld „Verweisvorlage bearbeiten“ wird geöffnet.
  2. Geben Sie den JavaScript-Code und die vollständige URL ein (wobei der variable Teil durch Dollarzeichen [$$] ersetzt wird). Sie können den Code einfügen, indem Sie mit der rechten Maustaste klicken und Einfügen auswählen.
  3. Wählen Sie Speichern aus.

URL-Vorlagen verarbeiten handling-url-templates

Auf der Seite „Map-Editor“ (bei Bildern und Rotationssets) bzw. der Registerkarte „Imagemap-Seiten“ des Anzeigebereichs „E-Katalog“ (bei E-Katalogseiten) stehen folgende Befehle zum Einstellen von URL-Vorlagen zur Verfügung:

  • URL-Vorlagenoption: Wählen Sie die Option URL-Vorlage aus, um Ihre URL-Vorlage auf alle Imagemaps auf einer Bild- oder E-Katalog-Seite anzuwenden.

  • Vorlagenoption: Deaktivieren Sie die Option Vorlage in der Imagemap-Liste, wenn eine einzelne Imagemap nicht die URL-Vorlage verwenden soll.

Definieren anderer Aktionen für Imagemaps defining-other-actions-for-image-maps

Sie können das Menü Anzeigen auswählen und Andere Aktionen auswählen, um andere Trigger-Aktionen als Rollover-Text und Web-Seiten-Launches auszuführen. Wenn der Benutzer den Mauszeiger über eine Imagemap bewegt, kann die Aktion ausgelöst werden. Diese Aktionen sind Attribute, die mithilfe der HTML-Spezifikationen des W3C (World Wide Web Consortium) für clientseitige Imagemaps definiert werden. Diese umfassen Folgende:

  • accesskey: Trigger führen eine Aktion aus, wenn der Benutzer eine bestimmte Taste auf der Tastatur drückt.

  • onfocus: Trigger eines Ereignisses, wenn die Imagemap über den Cursor oder durch Drücken einer Zugriffstaste fokussiert wird. Sie können beispielsweise eine Web-Seite starten, wenn die Imagemap den Fokus erhält, und sie schließen, wenn die Imagemap den Fokus verliert.

  • onblur: Trigger eines Ereignisses, wenn die Imagemap über den Cursor oder die Tabulatortaste den Fokus verliert.

So definieren Sie andere Aktionen für Imagemaps:

  1. Wählen Sie auf dem Bildschirm „Karteneditor“ (Bilder und Rotationssets) oder der Registerkarte „Seiten zuordnen“ des Bildschirms „E-Katalog“ (E-Kataloge) das Menü Anzeigen und wählen Sie Weitere Aktionen.
  2. Fügen Sie unter Verwendung der vom W3C-Konsortium spezifizierten Syntax in der Spalte „Andere Aktionen“ der Imagemap-Liste die unterstützten Attribute ein.
  3. Wählen Sie Speichern aus.

Wählen Sie das Anzeigen-Menü aus und wählen Sie Beide, wenn für eine Imagemap Rollover-Text und eine Aktion angezeigt werden sollen.

Erstellen von Imagemaps in Adobe Acrobat oder Adobe InDesign creating-image-maps-in-adobe-acrobat-or-adobe-indesign

Sie können Imagemaps während des Entwerfens Ihres E-Katalogs in Adobe Acrobat oder Adobe InDesign erstellen.

Erstellen Sie in Adobe Acrobat oder Adobe InDesign Hyperlink-Verweise, in denen die Imagemaps angezeigt werden sollen, und geben Sie URL-Speicherorte für die Imagemap an. Durch Auswahl der Option Links extrahieren beim Hochladen der PDF-Datei in Adobe Dynamic Media Classic werden die Links automatisch in Imagemaps konvertiert.

Weitere Informationen finden Sie in der Hilfe zu Adobe InDesign oder in der Hilfe zu Adobe Acrobat.

So erstellen Sie Imagemaps in Adobe InDesing to-create-image-maps-in-adobe-indesign

  1. Navigieren Sie in Adobe InDesign zu Fenster > Interaktiv > Hyperlinks.

  2. Wählen Sie im Bedienfeld Hyperlinks den Text, den Rahmen oder die Grafik aus, die Sie in eine Imagemap umwandeln möchten.

  3. Wählen Sie Neuer Hyperlink aus dem Bedienfeldmenü aus.

  4. Wählen Sie im Dialogfeld Neuer Hyperlink im Menü Link auf die URL.

  5. Geben Sie die Produkt-ID in das URL-Feld ein oder fügen Sie sie ein.

  6. Klicken Sie OK. (Adobe Dynamic Media Classic vervollständigt die URL mithilfe der Imagemap-URL-Vorlage.)

    note
    NOTE
    Sie müssen keine Darstellungsoptionen in Adobe InDesign festlegen. Sie können das Erscheinungsbild in Adobe Dynamic Media Classic festlegen.

  7. Wiederholen Sie die Schritte 2 bis 6 für alle Imagemaps, die Sie erstellen möchten.

  8. Exportieren Sie die Datei als PDF.

  9. Laden Sie die PDF in Adobe Dynamic Media Classic hoch.

  10. Wählen Sie in PDF Optionen die Option Links extrahieren aus.

So erstellen Sie Imagemaps in Adobe Acrobat to-create-image-maps-in-adobe-acrobat

  1. Navigieren Sie in Adobe Acrobat zu Tools > Erweiterte > Link-Tool.
  2. Erstellen Sie die Imagemap durch Ziehen.
  3. Wählen Sie im Feld Link erstellen die Option Benutzerspezifischer Link und klicken Sie auf Weiter.
NOTE
Sie müssen keine Darstellungsoptionen in Adobe Acrobat festlegen. Sie können das Erscheinungsbild in Adobe Dynamic Media Classic festlegen.
  1. Klicken Sie im Feld Link-Eigenschaften auf Aktionen.
  2. Wählen Sie Menü Aktion auswählen die Option Weblink öffnen“ aus und klicken Sie dann auf Hinzufügen.
  3. Geben Sie die Produkt-ID für die Imagemap in das Feld URL bearbeiten ein und klicken Sie auf OK. (Adobe Dynamic Media Classic vervollständigt die URL mithilfe der Imagemap-URL-Vorlage.)
  4. Wiederholen Sie Schritt 1 bis 7 für alle Imagemaps, die Sie erstellen möchten.
  5. Speichern Sie die Datei.
  6. Laden Sie die PDF in Adobe Dynamic Media Classic hoch und wählen Sie aus den PDF-Optionen Links extrahieren aus.
recommendation-more-help
dynamic-media-classic-help-using