Video-Tutorial anschauen

Erhalten Sie in dieser Videoanleitung eine Übersicht der Funktionen.

In diesem 2-minütigen Einführungsvideo erklären wir Ihnen die Grundlagen von ImageMarker und wie Sie sofort mit der interaktiven Gestaltung Ihrer Bilder und Fotos loslegen können. Von den Grundeinstellungen, über das Tagging Ihres Bildes bis hin zur Effekterstellung.

Weitere Video-Tutorials
Anmeldung, Login & Passwort

Anmeldung

Um auf ImageMarker Ihre Bilder interaktiv gestalten zu können, müssen Sie sich zunächst nicht registrieren. Für zusätzliche Funktionen wie das Importieren oder generieren des Bild-Codes etc. wird ein Plus-Account benötigt. Die Anmeldung kann im Editor über die Schaltfläche "Login" und anschließend "Anmelden" durchgeführt werden. Tragen Sie eine gültige E-Mail-Adresse ein und denken Sie sich ein raffiniertes Passwort aus. Mit einem Klick auf den Anmeldebutton "Anmelden & bezahlen" werden Sie an PayPal weitergeleitet. Nach Ihrer einmaligen Zahlung sind Sie sofort registriert und freigeschaltet! Sie erhalten zusätzlich eine E-Mail von ImageMarker, in der Ihre Anmeldung bestätigt wird.

Login & Passwort vergessen

Sie können sich im Bildeditor über die Schaltflächen "Laden, Speichern, Code oder Login" in Ihren Account einloggen. Sollten Sie einmal Ihr Passwort vergessen haben, klicken Sie im Editor auf "Login" und dann auf den Link "Passwort vergessen". Geben Sie Ihre bei ImageMarker registrierte E-Mail-Adresse ein und wir senden Ihnen ein neues Passwort zu. Dieses können Sie in Ihrem Profil ändern.

E-Mail-Adresse ändern

Wenn Sie Ihre E-Mail-Adresse ändern möchten, schreiben Sie uns bitte von Ihrer bei ImageMarker hinterlegten E-Mail-Adresse eine Nachricht an kontakt@imagemarker.com. Wir ändern dann Ihre E-Mail-Adresse.

Passwort ändern

Gehen Sie in Ihr Profil und tragen Sie Ihr aktuelles Passwort ein, anschließend geben Sie Ihr neues Passwort ein und klicken auf die Schlatfläche "Speichern".

Mit Ihrem ImageMarker Plus Account können Sie unbegrenzt viele multimediale Inhalte auf Ihren Bildern und Fotos erstellen.

Sie können Projekte speichern, laden und importieren. Außerdem steht Ihnen eine zusätzliche Sidebar zur Verfügung mit der Sie effizienter und genauer Ihr Bild bearbeiten können.

Wenn Sie mit der Bearbeitung fertig sind, haben Sie die Möglichekeit Ihre interaktiven Bilder auf Ihrer eigenen Website zu verwenden.

11,00 € für 30 Tage *
29,00 € für 3 Monate *
87,00 € für 12 Monate *
Mehr erfahren

- Der Account wird nicht automatisch verlängert.
- Sie können selbst entscheiden ob Sie verlängern möchten.
- Ihre bearbeiteten Bilder bleiben auch ohne Plus-Account solange gespeichert, bis Sie diese selbst löschen.
- Zahlungsmöglichkeiten: PayPal, Lastschrift, Kreditkarte, Überweisung

*Preise inkl. MwSt.




Grundlagen

Bilder hochladen

Klicken Sie im Editor links auf die Schaltfläche "Einstellungen" und anschließend auf "Bilder". Gehen Sie auf "Datei auswählen" und wählen Sie eine Bilddatei von Ihrer Festplatte aus. Klicken Sie anschließend auf die Schaltfläche "Speichern" um Ihr Bildhochzuladen. Ihr Bild darf nicht größer als 1MB sein.

Eigenen Bildpfad verwenden

Klicken Sie im Editor links auf die Schaltfläche "Einstellungen" und anschließend auf "Bilder". Sie haben die Möglichkeit das Bild auf Ihrem eigenen Webspace zu verwalten, indem Sie bei "Bildpfad / URL" den Pfad zum Bild auf Ihrem Webspace eingeben. Achten Sie darauf das der Pfad mit z.B. .jpg, .gif, .bmp oder .png endet.

Um ein Bild zu importieren, gehen Sie zunächst auf "Import" und auf "ImageMarker Bildcode". Gehen Sie in den entsprechenden Bildcode und kopieren diesen ab

.imageMapPro({"id"......... bis ...... }]}]});});})(jQuery, window, document);

und fügen Sie diesen bei "Code importieren" ein. Klicken Sie anschließend auf "Importieren".

Um ein Projekt zu duplizieren, erstellen Sie zunächst ein neues Projekt indem Sie auf "Einstellungen" und "Allgemein" klicken. Geben Sie einen neuen Projektnamen ein und klicken Sie auf "Speichern". Gehen Sie nun auf "Import" und auf "ImageMarker Bildcode". Kopieren Sie im Bildcode (welches Sie duplizieren möchten) den Code

.imageMapPro({"id"......... bis ...... }]}]} );});})(jQuery, window, document);

und fügen Sie diesen bei "Code importieren" ein. Klicken Sie anschließend auf "Importieren". Wenn Ihr Bild angezeigt wird gehen Sie erneut auf "Speichern".

Um ein neues Bildprojekt zu erstellen, klicken Sie im Editor oben links auf die Schaltfläche "Neu". Geben Sie Ihrem Bildprojekt einen Titel und klicken Sie auf "Erstellen".

Projekt speichern
Zum Speichern, klicken Sie im Editor oben auf die Schaltfläche "Speichern".

Projekt laden
Zum Laden, klicken Sie im Editor oben auf die Schaltfläche "Öffnen".

Projekt löschen
Zum löschen, klicken Sie im Editor oben auf die Schaltfläche "Öffnen" und anschließend auf das Papierkorb-Symbol neben Ihrem Projekt welches Sie löschen möchten.

Sie können Ihr interaktives Bild im Live-Modus testen und anpassen, indem Sie oben im Editor auf die Schaltfläche "Vorschau" klicken. Einige Funktionen können nicht im Vorschaumodus bearbeitet werden, deaktiveren Sie den Vorschaumodus wenn Sie die Bearbeitung im vollen Umfang fortsetzen möchten.

Bildcode generieren

Um den Bild-Codebaustein für Ihr interaktives Bild zu erhalten, klicken Sie im Editor oben auf die Schaltfläche "Code". Klicken Sie auf Code kopieren und fügen Sie den Bildcode in den HTML-Code Ihrer Website ein. Der Bildcode funktioniert bei allen HTML fähigen Websites, Online-Shops und Blogs.




Bildgestaltung

Bild-Tagging / Bildbeschreibung erstellen

Nachdem Sie Ihr Bild hochgeladen haben, klicken Sie auf die Stelle in Ihrem Bild, welche Sie beschreiben möchten. Gehen Sie anschließend auf "Bearbeiten" und "Bildinhalt erstellen". Um einen einfachen Textinhalt zu erstellen, schreiben Sie Ihren Text in das Feld "Textinhalt erstellen". Wenn Sie mit der Beschreibung fertig sind, klicken Sie oben im Editor auf die Schaltfläche "Vorschau". Wenn Sie nun den Mauszeiger über die Markierung in Ihrem Bild bewegen, wird Ihre Bildbeschreibung angezeigt. Klicken Sie auf eine andere Stelle im Bild um eine weitere Beschreibung zu erstellen.

Bildbeschreibung bearbeiten

Um Inhalte in Ihrem Bild zu bearbeiten, klicken Sie auf die Markierung in Ihrem Bild welche verändert werden soll. Nun können Sie die Markierung mit dem Mauszeiger an einer anderen Stelle im Bild positionieren oder die Inhalte überarbeiten.

Icons & Symbole auswählen

Um Icons zu verwenden, klicken Sie zunächst auf die Markierung im Bild welche Sie bearbeiten möchten. Gehen Sie anschließend auf "Bearbeiten" und "Icon". Aktivieren Sie die Schaltfläche "Icon benutzen" und "Icon-Bibilothek öffnen". Es erscheint eine Übersicht aller Icons. Klicken Sie auf das Icon, welches Sie als Markierung verwenden möchten.

Eigenes Icon verwenden

Um eigene Icons zu verwenden, klicken Sie zunächst auf die Markierung im Bild welche Sie bearbeiten möchten. Gehen Sie anschließend auf "Bearbeiten" und "Icon". Aktivieren Sie die Schaltfläche "Icon benutzen" und "Eigenes Icon". Geben Sie bei "Iconpfad / URL" den Pfad zum Icon auf Ihrem Webspace ein. Achten Sie darauf das der Pfad mit z.B. .jpg, .gif, .bmp oder .png endet.

Klicken Sie auf das Polygon Symbol neben Ihrem Bild. Setzen Sie eine Stelle im Bild wo Sie mit der Markierung starten möchten. Anschließend markieren Sie alle Punkte um die Person oder das Objekt in Ihrem Bild. Um die Markierung zu beenden, schließen Sie das Polygon indem Sie auf die erste Markierung klicken. Sie können die einzelnen Markierungspunkte verändern, indem Sie mit dem Mauszeiger einen Punkt der Markierung bewegen.

Sie können die Position zbw. Ausrichtung Ihrer Tooltips selbst bestimmen. Gehen Sie hierzu im Editor auf "Gestaltung" > "Tooltip Einstellungen" > "Tooltip Position". Hier können Sie einstellen in welcher Richtung (Rechts, Links, Oben oder Unten) Ihr Tooltip erscheinen soll.

Sie können die Eigenschaften Ihrer Tooltips selbst gestalten. Markieren Sie eine Stelle in Ihrem Bild und gehen Sie auf "Bearbeitung". Klicken Sie anschließend auf "Tooltip Einstellungen".

Mit dem Polygon können Sie die Markierung in Ihrem Bild frei gestalten. Erstellen Sie Markierungspunkte um das Objekt oder die Person im Bild und verbinden Sie den letzten Punkt mit Ihrem Anfangspunkt. Erst dann ist die Markierung abgeschlossen.

Sie können Ihr interaktives Bild für Smartphones und Tablet-PC´s optimieren indem Sie auf "Bildeinstellungen" gehen und anschließend die Schaltfläche "Responsive" aktivieren.

Um Ihre Bildbeschreibung als Vollbild wiederzugeben, gehen Sie auf "Bildeinstellungen" und anschließend auf "Vollbild Tooltips". Wählen Sie im Dropdown-Menü "Alle Geräte" aus.




Bild-Baukasten

Um multimediale Inhalte z.B. Texte, Videos, Musik, Thumbnails etc. in Ihrem Bildinhalt wiederzugeben, gehen Sie im Editor auf die Schaltfläche "Gestaltung" und anschließend auf "Bildinhalte erstellen". Klicken Sie nun auf "Baukasten" und "Bild-Baukasten öffnen". Es erscheint ein Fenster mit verschiedenen Elementen. Wählen Sie ein Element und ziehen Sie dieses per Drag-and-Drop mit dem Mauszeiger auf den Container in Ihrem Bild. Klicken Sie im Container auf das Element um diese zu bearbeiten. Sie haben die Möglichkeit mehrere Elemente in den Container zu ziehen. Wenn Sie mit der Bearbeitung fertig sind, klicken Sie auf "Speichern".

Text:
Textinhalte schreiben, welche in Ihrem Bild wiedergegeben werden sollen.

Layout:
Passen Sie den Außen- und Innenabstand um Ihren Text an.

Style:
Gestalten Sie den Hintergrund oder erstellen Sie einen Rahmen um Ihren Text.
Z.B. "normal" für normale Schriftstärke oder "bold" für fette Schriftstärke.

Font:
Stellen Sie die Schriftart ein und bestimmen Sie die Schriftgröße und Farbe.
Bekannte Schriftarten sind z.B.: Verdana, Tahoma, Arial, Helvetica, Times New Roman, Georgia, Times, Serif, Courier New, Courier usw....
Hier finden Sie eine Übersicht der Schriftarten: https://de.wikipedia.org/wiki/Liste_von_Schriftarten

General:
Verwenden Sie Ihre eigenen CSS-Styles und gestalten Sie alles ganz individuell.

Image:
Fügen Sie ein Vorschaubild ein, indem Sie den Pfad zum Bild eingeben. Beachten Sie dabei, dass am Ende des Bildpfades das Format .gif,.jpg,.jpeg oder .png steht. Bestimmen Sie ob Ihr Bild verlinkt werden soll, indem Sie "Bild ist eine Verlinkung" aktivieren und den entsprechenden Link eintragen.

Layout:
Passen Sie den Außen- und Innenabstand um Ihr Bild an.

Style:
Gestalten Sie den Hintergrund oder erstellen Sie einen Rahmen um Ihr Bild.

General:
Verwenden Sie Ihre eigenen CSS-Styles und gestalten Sie alles ganz individuell.

Video:
Fügen Sie ein Video ein, indem Sie den Pfad zum Video eingeben. Beachten Sie dabei, dass Ihr Video das Format .mp4,.webm oder .ogv hat. Bestimmen Sie ob Ihr Video verlinkt werden soll, indem Sie "Video ist ein Link" aktivieren und den entsprechenden Link eintragen.

Layout:
Passen Sie den Außen- und Innenabstand um Ihr Video an.

Style:
Gestalten Sie den Hintergrund oder erstellen Sie einen Rahmen um Ihr Video.

General:
Verwenden Sie Ihre eigenen CSS-Styles und gestalten Sie alles ganz individuell.

Video: Fügen Sie ein YouTube Video ein, indem Sie auf YouTube über die Funktion "Teilen" > "Einbetten" den Embed Code kopieren und diesen in das Feld "YouTube Embed Code" im Bildeditor eingeben. Ausserdem können Sie die Größe für das Video in Ihrem Bildinhalt anpassen.

Layout:
Passen Sie den Außen- und Innenabstand um Ihr Video an.

General:
Verwenden Sie Ihre eigenen CSS-Styles und gestalten Sie alles ganz individuell.

Button:
Geben Sie den Namen für Ihre Schaltfläche ein. Passen Sie die Farbe an und bestimmen Sie die Größe und den Eckradius.
Mit inline-block und block bestimmen Sie die Breite Ihrer Schaltfläche.

Layout:
Passen Sie den Außen- und Innenabstand um Ihrer Schaltfläche an.

Style:
Gestalten Sie den Hintergrund oder erstellen Sie einen Rahmen um Ihre Schaltfläche.

Font:
Stellen Sie die Schriftart ein und bestimmen Sie die Schriftgröße und Farbe.
Bekannte Schriftarten sind z.B.: Verdana, Tahoma, Arial, Helvetica, Times New Roman, Georgia, Times, Serif, Courier New, Courier usw.... Hier finden Sie eine Übersicht der Schriftarten: https://de.wikipedia.org/wiki/Liste_von_Schriftarten

General:
Verwenden Sie Ihre eigenen CSS-Styles und gestalten Sie alles ganz individuell.




Bilder einfügen bei Website-Baukästen

1. Installieren Sie das Plugin "Shortcoder" in Ihrem Wordpress unter "Plugins" > "Installieren" > "Plugin hochladen".
Hier können Sie das Plugin kostenlos downloaden.

2. Klicken Sie im Wordpress Adminbereich auf "Einstellungen" > "Shortcoder" und gehen Sie auf "Create a new shortcode".
3. Klicken Sie auf "<> Code editor".
4. Geben Sie Ihrem Bild einen Titel und fügen Sie Ihren Bildcode von ImageMarker in das Feld "Shortcode content" ein und speichern Sie ab.
5. Kopieren Sie aus der Liste Ihren Shortcode, indem Sie auf das Symbol "<>" klicken. Der Shortcode sieht z.B. so aus "[sc name="testbild"]"
6. Gehen Sie auf einen Beitrag oder eine Seite und klicken Sie über dem Textfeld auf "Visuell".
7. Fügen Sie Ihren Shortcode an die Stelle ein, wo das interaktive Bild erscheinen soll und speichern Sie ab.

1. Kopieren Sie den kompletten Bildcode im Bildeditor.
2. Gehen Sie auf Ihrer Jimdo-Seite (dort wo das Bild erscheinen soll) auf "Inhalt hinzufügen".
3. Weitere Inhalte und Add-ons.
4. Klicken Sie auf "Widget / Html" und fügen Sie den Bildcode von ImageMarker ein.
5. Warten Sie bis der Ladebalken nicht mehr weiter lädt. Dieser Vorgang kann bis zu 2min. dauern.
6. Gehen Sie in Jimdo auf "Menü" (oben links).
7. Klicken Sie auf "Einstellungen" und auf "Head bearbeiten".
8. Fügen Sie folgenden Code in das Feld ein:
<link rel="stylesheet" href="https://imagemarker.com/editor/public/cssv2/image-map-pro.min.css">
<link rel="stylesheet" href="https://imagemarker.com/editor/public/cssv2/squares.min.css">

(Diesen Code müssen Sie pro Jimdo-Seite nur einmal in den Head einfügen. Egal wieviele Bilder Sie auf Ihrer Jimdo-Seite verwenden.)
9. Klicken Sie auf "Speichern". Fertig!

Videobeschreibung anschauen: https://www.youtube.com/watch?v=cTp1qeQv6RM

1. Kopieren Sie den kompletten Bildcode im Bildeditor.
2. Gehen Sie auf Ihrer WIX.com-Seite auf "Hinzufügen" (kleines Kreuz links).
3. Klicken Sie auf "Sonstige" und "HTML-Code".
4. Ziehen Sie das HTML-Fenster auf Ihrer Website an die Stelle, wo das Bild erscheinen soll und passen Sie es in der Größe an.
5. Klicken Sie auf "HTML-Code eingeben" und fügen Sie den Bildcode von ImageMarker bei "HTML-Code / Nur HTTPS..." ein.
6. Bestätigen Sie mit "Aktualisieren". Fertig!

Videobeschreibung anschauen: https://www.youtube.com/watch?v=_jPu3MLJoR0

1. Kopieren Sie den kompletten Bildcode im Bildeditor.
2. Fügen Sie mit Hilfe des "HTML-Widget" den Bildcode auf Ihrer 1und1-Website an der Stelle ein, wo später das Bild erscheinen soll.
3. Klicken Sie auf "Einstellungen" und "Erweiterte Einstellungen anpassen".
4. Gehen Sie auf "Head bearbeiten" und fügen Sie den folgenden Code ein:
<link rel="stylesheet" href="https://imagemarker.com/editor/public/cssv2/image-map-pro.min.css">
<link rel="stylesheet" href="https://imagemarker.com/editor/public/cssv2/squares.min.css">

5. Speichern Sie Ihre Änderung ab. Fertig!




Fehlerbehebung

Wenn Ihr interaktives Bild nicht auf Ihrer Website angezeigt wird könnte das an folgendem liegen:

- Der Bildcode wurde nicht komplett kopiert.
- Es sind Fehler beim exportieren des Bildcodes aufgetreten (diese können z.B. durch installierte Plugins im Browser auftreten).

Bitte überprüfen Sie, ob in Ihrem Bildcode dieser Fehler enthalten ist:

Falsch: <link rel="stylesheet" href="https://imagemarker.com/editor/public/cssv2/index.php/image-map-pro.min.css">
<link rel="stylesheet" href="https://imagemarker.com/editor/public/cssv2/index.php/squares.min.css">


Sollte das Wort "index.php" in den ersten Zeilen Ihres Bildcodes vorkommen, entfernen Sie dieses Wort bitte aus den Zeilen um diesen Fehler zu beheben.

Richtig: <link rel="stylesheet" href="https://imagemarker.com/editor/public/cssv2/image-map-pro.min.css">
<link rel="stylesheet" href="https://imagemarker.com/editor/public/cssv2/squares.min.css">


- Ihr Internet-Browser ist nicht auf dem aktuellsten Stand.
- JavaScript ist nicht aktuell oder wurde nicht installiert. Mehr erfahren

Wenn Sie Wordpress oder Jimdo verwenden, beachten Sie bitte die Hilfestellungen unter "Bilder einfügen bei Website-Baukästen".

Sollte Ihr Bild nach dem hochladen oder Eingabe des Bildpfades nicht angezeigt werden, könnte es folgende Ursache haben:

- Ihr Bild ist größer als 1MB
- Das Bildformat ist kein .JPG, .GIF, .PNG oder .BMP
- Der Bildpfad zu Ihrem Webspace ist falsch eingetragen. Am Ende des Links muss eine Bilddatei stehen.

Wenn keine dieser Punkte zutreffend ist, wenden Sie sich bitte per E-Mail an uns.

Sollte der ImageMarker-Bildeditor nicht mehr starten d.h. es erscheint beim starten des Editor nur der Hinweis "Lade ImageMarker", löschen Sie bitte die Cookies Ihres Browsers und starten Sie den Editor erneut.

Wenn der ImageMarker Bildeditor in Ihrem Browser nicht richtig dargestellt wird, die Tags auf Ihrem Bild fehlerhaft sind oder sonstige Einstellungen nicht richtig funktionieren, kann das folgende Gründe haben:

- Ihr Internet-Browser ist nicht auf dem aktuellsten Stand.
- JavaScript ist nicht aktuell oder wurde nicht installiert. Mehr erfahren


Sollte keine dieser Punkte zutreffend sein, wenden Sie sich bitte per E-Mail an uns.



FAQ

Ihre Bilder und Inhalte bleiben für einen unbegrenzten Zeitraum gespeichert. Sie können Bilder und Inhalte selbst verwalten und löschen. Indem Sie Ihr Projekt über die Schaltfläche "Öffnen" aufrufen und anschließend auf das Papierkorb-Symbol klicken.

Nein. Ihr mit ImageMarker erstelltes Bild ist komplett werbefrei und ohne störende Wasserzeichen.

Nein. Ihre Bilder, Fotos und Inhalte können nur von Ihnen gesehen werden, außer Sie teilen diese auf anderen Websites.

ImageMarker macht sich die Inhalte der Mitglieder nicht zu Eigen, nimmt keine Vorabprüfung vor und übernimmt keinerlei Verantwortung für die inhaltliche Richtigkeit und/oder rechtliche Unbedenklichkeit der Inhalte. Sofern ein Mitglied der Ansicht ist, dass einzelne Inhalte Rechte Dritter verletzen, gegen geltendes Recht oder gegen diese Nutzungsbedingungen verstoßen, bittet ImageMarker um eine entsprechende Nachricht unter genauer Bezeichnung des beanstandeten Inhalts per E-Mail über unser Kontaktformular.

Bei der Anmeldung werden keine Adressedaten über Sie abgefragt, daher schicken Sie uns bitte eine E-Mail mit Ihrer Rechnungsanschrift über die bei ImageMarker hintergelegten E-Mail-Adresse. Sie erhalten dann umgehend eine detailierte Rechnung zugeschickt.

Um Ihr Mitgliedskonto bei ImageMarker zu löschen, senden Sie uns bitte eine E-Mail an kontakt@imagemarker.com von Ihrer bei uns registrierten E-Mail-Adresse. Wir löschen dann Ihre Anmeldung und Daten. Beachten: Alle Ihre Bilder, Fotos, Daten und Inhalte werden unwiderruflich gelöscht.

Sie finden nicht, was Sie suchen?

Bitte beschreiben Sie Ihr Thema oder Problem, damit wir Sie optimal bei der Lösung Ihres Anliegens unterstützen können.


Wir nehmen den Datenschutz sehr ernst und gehen sorgsam mit Ihren Daten um.