Erstellen von Imagemaps

Eine Imagemap ist ein Bereich auf einem Bild oder einer E-Katalog-Seite oder ein Bild in einem Rotationsset, mit dessen Hilfe ein Bedienfeld mit Rollover-Text angezeigt werden kann. Wenn der Benutzer auf eine Imagemap klickt, wird eine bestimmte Aktion ausgelöst. Beispielsweise kann eine Website aufgerufen werden, auf der der Benutzer mehr über ein Produkt erfährt. Um eine Imagemap wird ein Umriss angezeigt, wenn der Benutzer den Mauszeiger darüber bewegt.

Neben der Möglichkeit, in Dynamic Media Classic Imagemaps zu erstellen, können Sie beim Erstellen 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 zum Starten von Webseiten ein.
• URL-Vorlagen für Imagemaps erstellen
• Imagemaps in andere Bilder, E-Katalogseiten oder Rotationssets kopieren
• 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

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

   • Wenn Sie mit einem Bild in der Rasteransicht oder Listenansicht arbeiten, klicken Sie in der Dropdownliste "Bearbeiten"auf Imagemap. Alternativ können Sie es in der Detailansicht öffnen und dann über dem Bild auf Imagemap klicken.
   • Wenn Sie in der Rasteransicht oder Listenansicht mit einem Rotationsset arbeiten, klicken Sie auf Bearbeiten. Oder öffnen Sie es in der Detailansicht und klicken Sie dann auf Bearbeiten. Wählen Sie ein Bild-Asset aus und klicken Sie dann auf Imagemap.
   • Wenn Sie mit einem eCatalog arbeiten, klicken Sie in der Rasteransicht, Listenansicht und Detailansicht auf Bearbeiten. Klicken Sie auf die Registerkarte Seiten zuordnen .

   

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

   Rechteckige ZuordnungWählen Sie das Rechteck-Bildzuordnungstool aus und ziehen Sie es auf die Seite, um das Rechteck zu erstellen. Um einen Punkt zu einer rechteckigen Map hinzuzufügen (und sie so in eine polygonale verweissensitive Grafik zu ändern), drücken Sie die Strg-Taste, platzieren Sie das Einfügen-Werkzeug an der gewünschten Position und klicken Sie.

   Polygonale LandkarteWählen Sie das Polygon-Imagemap-Tool aus und klicken Sie auf Punkte auf den Bereich des Bildes, das Sie umschließ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, wird die ursprüngliche Dichte verworfen und der Regler auf den 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 Dynamic Media Classic ihr einen Namen zu.

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

4. Wenn die Benutzer durch Klicken auf die Imagemap eine neue Website öffnen können sollen, geben Sie in der Imagemap-Liste die entsprechende URL ein.

   Siehe zur Eingabe 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 im Menü „Anzeigen“ der Imagemap-Liste die Option „Rollover-Text“. Geben Sie anschließend den Text ein, der für die Benutzer 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. Klicken Sie in der Dropdown-Liste „Anzeigen“ auf „Andere Aktionen“. Geben Sie die Attribute der Aktion ein. (Klicken Sie auf „Anzeigen“ > „Beide“, um den Rollover-Text und eine Aktion für eine Imagemap zu erstellen.)

   Siehe Definieren anderer Aktionen für Imagemaps.

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

   • Um eine Vorschau der Imagemaps anzuzeigen, klicken Sie auf Vorschau.
   • Um eine Imagemap oder einen Polygon-Vertex zu löschen, wählen Sie eine Form auf dem Bild aus und klicken Sie dann auf Löschen. Oder klicken Sie bei einem eCatalog auf der Registerkarte "Seiten bestellen"auf Maps löschen , um Imagemaps von allen Seiten zu entfernen.
   • Um eine Imagemap vorübergehend von einem Bild, einer E-Katalogseite oder einem Bild in einem Rotationsset zu entfernen, ohne sie zu löschen, deaktivieren Sie in der Imagemap-Liste die entsprechende Option „Ein“.

8. Klicken Sie auf „Speichern“.

Anpassen der Position, Form und Größe von Imagemaps

Um die Position, Form und Größe einer Imagemap zu ändern, klicken Sie auf „Imagemap“ . Wählen Sie dann das Tool Schwenken aus und befolgen Sie die folgenden Anweisungen:

Ändern der Position - Verschieben Sie den Zeiger in die Nähe, jedoch nicht über den Rahmen der Imagemap. Wenn der Mauszeiger als Vierfachpfeil dargestellt wird, ziehen Sie die Imagemap an eine andere 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:

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. Halten Sie beim Ziehen die Umschalttaste gedrückt, um die Größe zu ändern, dabei jedoch das Seitenverhältnis (die Form) beizubehalten.

Polygonale Imagemap : Ziehen Sie einen quadratischen Auswahlpunkt. Um einen Auswahlziehpunkt zu erstellen, klicken Sie auf den Rand der Imagemap und beginnen Sie zu ziehen.

Beheben von überlappenden Imagemaps

Wenn das Bild oder die E-Katalogseite mehrere Imagemaps enthält, die sich überschneiden, können Sie Einstellungen für die Überschneidung festlegen. Ä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

Anstatt auf jeder Seite Imagemap-Daten einzugeben, können Sie auch die Daten für das Bild, das Rotationsset oder den E-Katalog in den Anzeigebereich mit der Imagemap-Zusammenfassung importieren. Die Imagemap-Daten werden in Form einer tabulatorgetrennten oder XML DTD-Datei importiert. Die Felder in der Datei müssen dieselbe Reihenfolge haben, wie im Anzeigebereich mit der Imagemap-Zusammenfassung dargestellt: „Name“, „Inhaltsverz.“, „Imagemaps“, „URLs“, „Rollover-Text“, „Andere Aktionen“ und „Suchzeichenfolgen“. Indem Sie Imagemap-Daten importieren, können Sie sich die Arbeit beim Eingeben der Daten in der Imagemap-Liste zum Erstellen der einzelnen Imagemaps sparen.

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. Klicken Sie auf „Metadaten importieren“.
3. Klicken Sie im Dialogfeld „Metadaten hochladen“ auf „Bild“ oder „Imagemap“, um die Metadaten des gewünschten Asset-Eigenschaftstyps hochzuladen.
4. Wählen Sie In der Dropdown-Liste „Datei erstellen“ die Datei aus, die Sie erstellen möchten.
5. (Optional) Klicken Sie auf „Erstellen“, um die erzeugten Daten abhängig von dem von ihnen gewünschten Dateityp in der Vorschau anzuzeigen. Klicken Sie auf „Schließen“, 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. Klicken Sie auf „Hochladen“.

Kopieren von Imagemaps

Sie können Imagemaps zwischen Bildern und E-Katalogseiten kopieren. Verwenden Sie Imagemap kopieren, um einen Vorsprung bei der Erstellung zu erhalten. Sie können Imagemaps auch kopieren, um sie auf Bildern oder Seiten mit demselben Layout oder derselben Imagemap-Struktur erneut zu verwenden.

Das Kopieren von Imagemaps in einem E-Katalog ist zum Beispiel eine praktische Möglichkeit, alle Imagemaps in die unterschiedlichen Sprachversionen des gleichen E-Katalogs zu kopieren. Um ein optimales Ergebnis zu erzielen, sollten Sie nach Möglichkeit zwischen E-Katalogen mit derselben Seitenanzahl und den gleichen Bildern kopieren. Wenn der E-Katalog, in den Sie kopieren, bereits Imagemaps enthält, werden diese Imagemaps beim Kopieren 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. Klicken Sie auf „Imagemaps kopieren zu“.

3. Führen Sie, abhängig davon, ob Sie Imagemaps aus Bildern oder Imagemaps aus einem E-Katalog kopieren möchten, einen der folgenden Schritte aus:

   • (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. Klicken Sie auf „Auswählen“.

Verwenden einer Vorlage zur Eingabe von JavaScript™ und URLs

Sie können eine URL-Vorlage (auch Href-Vorlage genannt) definieren, um das Eingeben von Imagemap-URLs einfacher und effizienter zu machen. 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 Dynamic Media Classic JavaScript™-Handler namens loadProduct, der das Bild in einem neuen Fenster öffnet.

URL-Vorlagen

Eine URL-Vorlage funktioniert so, dass der Inhalt der Spalte „URL“ in der Imagemap-Liste durch ein doppeltes Dollarzeichen (‘$$’) in der Vorlage ersetzt wird:

Javascript:loadProduct(‘$$’);void(0);

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

• URL-Vorlage: j avascript:loadProduct(‘https://www.examplesitehere.com/$$’);void(0);
• URL-Wert: product.htm
• Tatsächliche URL generiert: javascript:loadProduct(‘https://www.examplesitehere.com/product.html);void(0);

Standardmäßig enthält die URL-Vorlage einen proprietären 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 Dynamic Media Classic-Handler verwenden:

• loadProductCW

  Zeigt das URL-Ziel an, das in der Spalte „URL“ des aktuellen Fensters 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 Spalte „URL“ des übergeordneten Fensters (d. h. der Seite, über die die aktuelle Seite geöffnet wurde) angegeben ist. Das aktuelle Fenster bleibt geöffnet, während im übergeordneten Fenster das URL-Ziel angezeigt wird.

  HINWEIS

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

Erstellen einer URL-Vorlage

So erstellen Sie eine URL-Vorlage:

1. Klicken Sie im Anzeigebereich „Map-Editor“ (bei Bildern oder Rotationssets) bzw. auf der Registerkarte „Imagemap-Seiten“ des Anzeigebereichs „E-Katalog“ (bei E-Katalogseiten) 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 die Dollarzeichen [$] ersetzt wird). Sie können den Code einfügen, indem Sie mit der rechten Maustaste klicken und „Einfügen“ wählen.
3. Klicken Sie auf „Speichern“.

Arbeiten mit URL-Vorlagen

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:

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

• Vorlagenoption Deaktivieren Sie eine Vorlagenoption in der URL-Imagemap-Liste, wenn Sie nicht möchten, dass eine einzelne Imagemap die URL-Vorlage verwendet.

Festlegen anderer Aktionen für Imagemaps

Sie können im Menü „Anzeigen“ die Option „Andere Aktionen“ wählen, um andere Aktionen als die Anzeige von Rollover-Text und den Aufruf von Websites auszulösen. 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 einer Aktion, wenn der Benutzer eine bestimmte Taste auf der Tastatur drückt.

• onfocus - Trigger eines Ereignisses, das beim Fokuswechsel der Imagemap ausgelöst wird, durch Cursor, Tab oder Drücken einer Zugriffstaste. Sie können beispielsweise eine Website aufrufen, wenn die Imagemap den Fokus erhält, und sie wieder schließen, wenn die Imagemap den Fokus wieder verliert.

• onblur - Trigger eines Ereignisses, bei dem die Imagemap den Fokus verliert, entweder durch den Cursor oder durch Tab.

So definieren Sie weitere Aktionen für Imagemaps:

1. Öffnen Sie im Anzeigebereich „Map-Editor“ (bei Bildern und Rotationssets) bzw. auf der Registerkarte „Imagemap-Seiten“ des Anzeigebereichs „E-Katalog“ (bei E-Katalogseiten) das Menü „Anzeigen“ und wählen Sie die Option „Andere 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. Klicken Sie auf „Speichern“.

Wählen Sie das Menü Anzeigen und dann Beide aus, wenn eine Imagemap über Rollover-Text und eine Aktion verfügen soll.

Erstellen von Imagemaps in Adobe Acrobat oder InDesign

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

Erstellen Sie in Acrobat oder InDesign Hyperlinks an den Stellen, an denen die Imagemaps angezeigt werden sollen. Geben Sie die entsprechende URL für die Imagemaps an. Wenn Sie beim Hochladen der PDF-Datei in Dynamic Media Classic die Option Links extrahieren auswählen, werden die Links automatisch in Imagemaps konvertiert.

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

So erstellen Sie Imagemaps in Adobe InDesing

1. Klicken Sie unter InDesign auf Windows® > Interactive > Hyperlinks , um das Bedienfeld "Hyperlinks"zu öffnen.

2. Markieren Sie den Text, das Bild oder die Grafik, die Sie in eine Imagemap einfügen möchten.

3. Klicken Sie im Bedienfeld "Hyperlinks"im Bedienfeldmenü auf Neuer Hyperlink .

4. Wählen Sie im Dialogfeld Neuer Hyperlink die Option URL aus dem Menü Link zu .

5. Geben oder fügen Sie die Produkt-ID in das URL-Feld ein und klicken Sie auf OK. (Dynamic Media Classic vervollständigt die URL mit der URL-Vorlage für Imagemap.)

   HINWEIS

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

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

7. Exportieren Sie die Datei als PDF.

8. Laden Sie die PDF-Datei in Dynamic Media Classic hoch und wählen Sie aus den PDF-Optionen die Option Links extrahieren aus.

So erstellen Sie Imagemaps in Adobe Acrobat

1. Klicken Sie in Acrobat auf Tools > Erweiterte Bearbeitung > Link-Tool.
2. Erstellen Sie die Imagemap durch Ziehen. Das Feld „Verknüpfung erstellen“ wird geöffnet.
3. Wählen Sie Benutzerspezifischer Link und klicken Sie auf Weiter.

1. Klicken Sie im Feld "Link Properties"auf Actions.
2. Wählen Sie Öffnen Sie einen Web-Link aus dem Menü Aktion auswählen 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. (Dynamic Media Classic vervollständigt die URL mit der URL-Vorlage für die Imagemap.)
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-Datei in Dynamic Media Classic hoch und wählen Sie aus den PDF-Optionen die Option Links extrahieren aus.